Html5 Canvas+Javascript实现一个简单画图程序（二）_H5之家

上篇文章已经知道了绘制图形的基本代码了，但是还不能根据鼠标来绘制，本文将会介绍方法。

js的鼠标事件：

关于这几个事件，有一篇文章做了很好的总结。

　　后面会有这几个事件的实际运用的代码。

这里有一个小小的细节，如果你的canvas是包在一个div里面的话，你想要取得鼠标的坐标的话，一定要减去div的相对偏移，因为canvas画图函数里面的坐标都是相对canvas左上角的。大致说明如下：

铅笔绘图

　　首先设置两个数组clickX, clickY，然后监听鼠标在canvas上面的点击-移动-松开这一系列事件，把该过程中的所经过的所有点的坐标写进刚刚的两个数组里。写完之后再用一个方法取出数组的内容把刚刚的路线画出来，用的是上一篇文章里讲到的lineTo方法，虽然是lineTo，但是是在一个很细微的粒度下，所以肉眼看起来还算是平滑的曲线。这样，在鼠标拖动的过程中，我们一次次地往数组里面写入坐标点，然后清除canvas上面的内容，在把坐标点画进来。（这种方法是全局刷新的，据说有一种局部刷新的手段，会高效点吧。但是目前来看全局刷新的性能还可以接受）
　　这里还牵扯到一个略微蛋疼的问题，canvas不能画点。所以当用户只是点了一下某区域然后并未移动鼠标的情况下就松开，是没有一个对应的方法叫drawPoint或者什么的把一个点画在这个坐标上面的。这里我用了一个折中的方法，我在原地画了一个很小的实心圆。
　　还有一个小细节，就是如何区分以下两个事件： A.用户在canvas上面点击了一下然后在canvas上拖动，B.用户没有点击或是在canvas之外的区域点击一下然后在canvas上面拖动。所以我们需要一个状态量来显示用户是不是真的在画。就交isPainting吧。
　　说了这么多，让我们来看一下目前的代码吧：
　　
　　demo.html:
　　 <!DOCTYPE html> 　　<html> 　　<head> 　　 <title>Simple Demo</title> 　　 <style> 　　 body { 　　 margin: 0px; 　　 padding: 0px; 　　 } 　　 #myCanvas { 　　 border: 1px solid #9C9898; 　　 } 　　 </style> 　　</head> 　　<body> 　　 <canvas id = "myCanvas" width = "800px" height = "500px"></canvas> 　　 <script type = "text/javascript" src = "main.js"></script> 　　</body> 　　</html> 　　main.js:
　　 var canvas, context, 　　 isPainting, 　　 clickX, clickY, clickDrag; 　　　　var mouseDown = function(e){ 　　 var mouseX = e.pageX; 　　 var mouseY = e.pageY; 　　 isPainting = true; 　　 addClick(mouseX, mouseY, false); 　　 redraw(); 　　} 　　var mouseUp = function(e){ 　　 isPainting = false; 　　 redraw(); 　　} 　　var mouseMove = function(e){ 　　 if(isPainting){ 　　 var mouseX = e.pageX; 　　 var mouseY = e.pageY; 　　 addClick(mouseX, mouseY, true); 　　 redraw(); 　　 } 　　　　} 　　var mouseOut = function(e){ 　　 isPainting = false; 　　} 　　　　function addClick(mouseX, mouseY, isDragging){ 　　 clickX.push(mouseX); 　　 clickY.push(mouseY); 　　 clickDrag.push(isDragging); 　　} 　　　　//重绘　　function redraw(){ 　　 context.clearRect (0 , 0, canvas.width , canvas.height ); 　　 context.strokeStyle = "#000000"; 　　 var numOfPts = clickX.length; 　　 for(var i=0; i<numOfPts; i++){ 　　 context.beginPath(); 　　 if(clickDrag[i]){ 　　 context.moveTo(clickX[i-1], clickY[i-1]); 　　 context.lineTo(clickX[i], clickY[i]); 　　 }else{ 　　 context.arc(clickX[i], clickY[i], 0.5, 0, 2*Math.PI, true); 　　 } 　　 context.closePath(); 　　 context.stroke(); 　　 } 　　} 　　　　//初始化　　function init(){ 　　 canvas = document.getElementById("myCanvas"); 　　 context = canvas.getContext("2d"); 　　 isPainting = false; 　　 clickX = new Array(); 　　 clickY = new Array(); 　　 clickDrag = new Array(); 　　 //鼠标事件　　 canvas.onmousedown = mouseDown; 　　 canvas.onmouseup = mouseUp; 　　 canvas.onmousemove = mouseMove; 　　 canvas.onmouseout = mouseOut; 　　} 　　　　window.onload = init();

　　这样就实现了铅笔绘图。如果你想添加新的功能，比如：修改颜色，则可以设置一个参数比如curColor什么的，然后给一个方法去动态修改，并且在redraw中使用这个参数作为strokeStyle。对了，stroke的风格是很多变的，这里只是最基本的，你可以改变很多。