使用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/ 
版权声明：本文版权归烟 台 杰瑞教育 科 技有限公司和博客园共有，欢迎转载，但未经做者赞成必须保留此段声明，且在文章页面明显位置给出原文链接，不然保留追究法律责任的权利。
技术咨询：