html5 canvas 微型绘图器

最新推荐文章于 2024-05-05 18:05:22 发布

大猫先生

最新推荐文章于 2024-05-05 18:05:22 发布

阅读量456

点赞数

分类专栏： html5 文章标签： html5 canvas

本文链接：https://blog.csdn.net/qq_17392301/article/details/49008479

版权

html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

var canvas;
var context;

window.onload=function(){
    //取得<canvas>和绘图上下文
    canvas=document.getElementById("drawingCanvas");
    context=canvas.getContext("2d");
    //添加用于绘图操作的事件处理程序
    canvas.onmousedown=startDrawing;
    canvas.onmouseup=stopDrawing;
    canvas.onmouseout=stopDrawing;
    canvas.onmousemove=draw;
};

//记录此前为选择的颜色而被点击的img元素
var previousColorElement;

function changeColor(color,imgElement)
{
    //重新设置当前绘图要使用的颜色
    context.strokeStyle=color;
    //为刚被点击的img元素应用一个新样式
    imgElement.className="Selected";
    //恢复上次被单机的img元素
    if(previousColorElement!=null) previousColorElement.className="";
    previousColorElement=imgElement;
}
//记录此前为选择的粗细而被单击过的img元素
var previousThicknessElement;
function changeThickness(thickness,imgElement)
{
    //重新设置当前绘图要使用的粗细
    context.lineWidth=thickness;
    //为刚才点击过的img元素应用一个新样式
    imgElement.className="Selected";
    //恢复上次单击过的img元素
    if(previousThicknessElement !=null) previousThicknessElement.className="";
    previousThicknessElement=imgElement;
}

var isDrawing=false;

function startDrawing(e)
{
    //开始绘图
    isDrawing=true;

    //创建新路径(使用当前设置好的描边颜色和线条粗细)
    context.beginPath();

    //把画笔放到鼠标当前所在的位置
    context.moveTo(e.pageX-canvas.offsetLeft,e.pageY-canvas.offsetTop);
}

function draw(e)
{
    if(isDrawing==true)
    {
        //找到鼠标的位置
        var x =e.pageX-canvas.offsetLeft;
        var y=e.pageY-canvas.offsetTop;

        //画一条到新位置的线
        context.lineTo(x,y);
        context.stroke();
    }
}
function stopDrawing()
{
    isDrawing=false;
}
function clearCanvas()
{
    context.clearRect(0,0,canvas.width,canvas.height);
}


//保存图片
function saveCanvas()
{
    //找到img元素
    var imageCopy=document.getElementById("savedImageCopy");
    //在图像中显示画布数据
    imageCopy.src=canvas.toDataURL();
    //显示包含img元素的div，以便把图像显示出来
    var imageContainer=document.getElementById("savedCopyContainer");
    imageContainer.style.display="block";
}

html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="./css/print.css">
         <script src="js/Paint.js"></script>

    </head>
    <body>
<div class="Toolbar">
    - Pen Color -<br>
    <img id="redPen" src="http://prosetech.com/html5/Chapter%2008/pen_red.gif" alt="Red Pen" onclick="changeColor('rgb(212,21,29)', this)">
    <img id="greenPen" src="http://prosetech.com/html5/Chapter%2008/pen_green.gif" alt="Green Pen" onclick="changeColor('rgb(131,190,61)', this)"> 
    <img id="bluePen" src="http://prosetech.com/html5/Chapter%2008/pen_blue.gif" alt="Blue Pen" onclick="changeColor('rgb(0,86,166)', this)">
  </div>
  <div class="Toolbar">
    - Pen Thickness -<br>
    <img src="http://prosetech.com/html5/Chapter%2008/pen_thin.gif" alt="Thin Pen" onclick="changeThickness(1, this)">
    <img src="http://prosetech.com/html5/Chapter%2008/pen_medium.gif" alt="Medium Pen" onclick="changeThickness(5, this)"> 
    <img src="http://prosetech.com/html5/Chapter%2008/pen_thick.gif" alt="Thick Pen" onclick="changeThickness(10, this)">
  </div>
  <div class="CanvasContainer">
    <canvas id="drawingCanvas" width="500" height="300"></canvas>
  </div>
  <div class="Toolbar">
    - Operations -<br>
    <button onclick="saveCanvas()">Save the Canvas</button>
    <button onclick="clearCanvas()">Clear the Canvas</button>
    <div id="savedCopyContainer">
      <img id="savedImageCopy"><br>
      Right-click to save ...
    </div>
  </div>

    </body>
</html>

body {
  background: white;
}

.Toolbar {
  float: left;
  font-family: 'Trebuchet MS'; 
  font-size: 14px;
  font-variant: small-caps;
  text-align: center;
  background: #F2F7FE;
  padding: 10px 15px 3px 10px;
  margin-bottom: 1px;
  margin-right: 1px;
  border: 1px solid #7B899B;
}

.Toolbar button {
  padding: 6px;
  margin: 7px 2px;
  font-variant: normal;
  font-size: 12px;
}

.CanvasContainer {
  clear: both;
}

canvas {
  border: 1px solid #7B899B;
}

img {
  padding: 2px;
  border: 2px solid #F2F7FE;
}

img:hover {
  border: 2px groove #E4F0FE;
  background: white;
}


img.Selected {
  border: 2px groove #E4F0FE;
}

#savedCopyContainer {
  display: none;
}

#savedCopyContainer img {
  width: 250px;
  height: 150px;
}

大猫先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5 canvas 微型绘图器

var canvas;var context;window.onload=function(){ //取得<canvas>和绘图上下文 canvas=document.getElementById("drawingCanvas"); context=canvas.getContext("2d"); //添加用于绘图操作的事件处理程序 canvas.onmou
复制链接

扫一扫