使用Canvas制作画图工具

  前  言

JRedu

　canvas是HTML5中重要的元素之一，canvas元素使用JavaScript在网页上绘制图像，画布是一个矩形区域，我们可以控制其每一个元素，并且canvas拥有多种的绘制路径、矩形、圆形、字符以及添加图像的方法。 这一章我们使用canvas来做一个画图工具，并且支持下载图片功能。

最终实现界面

最终实现界面如下，当然我这种手残党是画不出来，手动@陈冲老师画的：

画图工具实现的主要功能

1.画笔颜色和粗细点击选取

2.橡皮擦

3.清除画布

4.下载图片

在实现主要功能之前，首先要放置canvas画布，实现在规定区域内随意画图的功能，实现的原理是获取鼠标点击之后的位置，利用鼠标的点击、移动事件来实现绘画。实现代码如下：

设置全局变量

var canvas = document.getElementById('canvas');
var cvs = canvas.getContext('2d');
var drawing =false;

Html代码：

<canvas id="canvas" width="800px" height="600px" style="border: 1px solid red;"></canvas>

Js代码：

window.onload = function(){
var penWeight = 0;      //画笔粗细
var penColor = '';  //画笔颜色
canvas.onmousedown = function(e){
/*找到鼠标（画笔）的坐标*/
var start_x = e.clientX - canvas.offsetLeft + document.body.scrollLeft;
var start_y = e.clientY - canvas.offsetTop + document.body.scrollTop;
cvs.beginPath();    //开始本次绘画
cvs.moveTo(start_x, start_y);   //画笔起始点
/*设置画笔属性*/
cvs.lineCap = 'round';
cvs.lineJoin ="round";
cvs.strokeStyle = penColor;     //画笔颜色
cvs.lineWidth = penWeight;      //画笔粗细
canvas.onmousemove = function(e){
      /*找到鼠标（画笔）的坐标*/
      var move_x = e.clientX - canvas.offsetLeft + document.body.scrollLeft;
      var move_y = e.clientY - canvas.offsetTop + document.body.scrollTop;
      cvs.lineTo(move_x, move_y);     //根据鼠标路径绘画
        cvs.stroke();   //立即渲染
        }
      canvas.onmouseup = function(e){
            cvs.closePath();    //结束本次绘画
            canvas.onmousemove = null;
            canvas.onmouseup = null;
        }
        canvas.onmouseleave = function(){
            cvs.closePath();
            canvas.onmousemove = null;
            canvas.onmouseup = null;
        }
}
}

1画笔颜色和粗细点击选取

这里我分别从画笔颜色和画笔粗细中个选取一个作为例子来简述以下如何实现：

从上边的代码中可以了解到控制画笔粗细和颜色的分别是penWeight和penColor，也就是说，我们可以通过修改这两个变量从而实现改变画笔属性的功能，代码如下：

Html代码：

<input type="button" value="粗" class="bold btn" onclick="checkpen(10)" />
<input type="button" value="红" class="red item" style="background-color: red;border: none;" onclick="changecolor('red')"  />

Js代码：

function checkpen(width){ //设置笔的粗细
        cvs.lineWidth = width;
    }
    function changecolor(pencolor){ //设置颜色
        cvs.strokeStyle =pencolor;
    }

2橡皮擦

选中橡皮擦之后提示正在使用，利用鼠标移动，点击事件实现橡皮擦的功能，其中cvs.globalCompositeOperation = "destination-out";  可以实现橡皮擦点击经过的地方显示原始背景色。代码实现如下：

Html代码：

<input type="button" value="橡皮擦" class="eraser btn"   id="eraser" onclick="checkeraser()" />
<input type="button" value="取消橡皮擦" class="uneraser btn" id="uneraser" onclick="canceleraser()" />

Js代码：

//选中橡皮擦
function checkeraser(){
document.getElementById("eraser").value = "正在使用...";
cvs.lineWidth = 20;
cvs.globalCompositeOperation = "destination-out";
    function getBoundingClientRect(x,y){
    var box = canvas.getBoundingClientRect(); //获取canvas的距离浏览器视窗的上下左右距离
    return {x:x-box.left,
            y:y-box.top
    }
}
canvas.onmousedown = function(e){
    var first = getBoundingClientRect(e.clientX,e.clientY);
    cvs.save();
    cvs.beginPath();
    cvs.moveTo(first.x,first.y);
    drawing = true;
}
canvas.onmousemove = function(e){
    if(drawing){
        var move = getBoundingClientRect(e.clientX,e.clientY);
        cvs.save();
        cvs.lineTo(move.x,move.y);
        cvs.stroke()
        cvs.restore()
    }
}
canvas.onmouseup = function(){
    drawing = false;
}
canvas.onmouseleave = function(){
    drawing = false;
    canvas.onmouseup();
}
}

3清除画布

清空画布只需要调用clearRect() 方法，实现清空给定矩形内的指定像素。代码如下：

Html代码：

<input type="button" value="清除画布" class="clear fun" onclick="clearb()" />

Js代码：

//清除画布功能
    function clearb (){
        cvs.clearRect(0,0,800,800);
}

4下载图片

下载图片的部分代码和生成画布实现绘画的代码写在同一个方法中，一并贴出来了，可以自行删改。以下是实现代码：

Html代码：

<input type="button" value="清除画布" class="clear fun" onclick="clearb()" />

Js代码：

//保存图片
window.onload = function(){
    var penWeight = 0;      //画笔粗细
    var penColor = '';  //画笔颜色
    canvas.onmousedown = function(e){
        /*找到鼠标（画笔）的坐标*/
        var start_x = e.clientX - canvas.offsetLeft + document.body.scrollLeft;
        var start_y = e.clientY - canvas.offsetTop + document.body.scrollTop;
        cvs.beginPath();    //开始本次绘画
          cvs.moveTo(start_x, start_y);   //画笔起始点
          /*设置画笔属性*/
        cvs.lineCap = 'round';
        cvs.lineJoin ="round";
        cvs.strokeStyle = penColor;     //画笔颜色
        cvs.lineWidth = penWeight;      //画笔粗细
        canvas.onmousemove = function(e){
              /*找到鼠标（画笔）的坐标*/
            var move_x = e.clientX - canvas.offsetLeft + document.body.scrollLeft;
            var move_y = e.clientY - canvas.offsetTop + document.body.scrollTop;
            cvs.lineTo(move_x, move_y);     //根据鼠标路径绘画  

            cvs.stroke();   //立即渲染
        }
        canvas.onmouseup = function(e){
            cvs.closePath();    //结束本次绘画
            canvas.onmousemove = null;
            canvas.onmouseup = null;
        }
        canvas.onmouseleave = function(){
            cvs.closePath();
            canvas.onmousemove = null;
            canvas.onmouseup = null;
        }
    }
      var dlButton = document.getElementById("downloadImageBtn");
    bindButtonEvent(dlButton,"click",saveAsLocalImage)
}
function bindButtonEvent(element, type, handler)
            {
                   if(element.addEventListener) {
                      element.addEventListener(type, handler, false);
                   } else {
                      element.attachEvent('on'+type, handler);
                   }
            }
  function saveAsLocalImage () {
                var myCanvas = document.getElementById("canvas");
                var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
                window.location.href=image;
            }

如需源码，可戳右侧链接自行下载哦~http://www.jredu100.com/index.php?m=content&c=index&a=show&catid=65&id=39

作者：杰瑞教育
出处：http://www.cnblogs.com/jerehedu/ 
版权声明：本文版权归烟台杰瑞教育科技有限公司和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

技术咨询：