好久没出了，说好的例子拖到了现在。这次说一个画板的例子，就像网页上很多的绘图游戏一样，以后用 Canvas 就可以实现，非常简单，这里只做一个建议的说明思路
代码
注意：本文的代码用了 jQuery，注意引入。
| 代码如下 |
|
|
myCanvas.lineWidth = 5
myCanvas.strokeStyle = "blue";
myCanvas.lineCap = "round";
var paint = 0 ;
$( "#myCanvas" ).mousedown(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
paint = 1;
myCanvas.moveTo(mouseX, mouseY);
});
$( "#myCanvas" ).mouseup(function(e){
paint = 0;
});
$( "#myCanvas" ).mousemove(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
if( paint ){
myCanvas.lineTo(mouseX, mouseY);
myCanvas.stroke();
}
});
|
解析
上边的代码，首先和之前话直线一样三个属性，之前没用过 lineCap，说的是直线首尾是什么样的，round 为圆角，为了让画的图没用那么生硬。
然后一个变量 paint 指定指针移动时是否允许画图，这个要说明下，我们要的效果是必须在鼠标按下并且指针在画布的有效区域才可以绘制，这个变量就是为了防止鼠标没有按下或者松开之后依然绘制。
mousedown() 事件，鼠标按下时，首先获得鼠标对于画布的相对坐标，然后把 paint 改成真，也就是允许绘制，并且建立起点。
mouseup() 事件，鼠标松开，把 paint 改成假，不允许继续绘制。
mousemove() 事件，鼠标移动，获取鼠标对于画布的相对坐标，然后如果 paint 为真，即允许绘制则建立一个点连线，并结束。
因为绘制的点巨多，所以就像乱七八糟的线一样~
这只是一个简单的例子，你当然可以留出几个按钮和输入框让用户自行控制线条宽度、样式以清空画布、保存绘制的图形之类的。
