HTML5的canvas元素是HTML5新特性中最有用的元素之一。通过html5 canvas，我们可以做图像处理、绘图、保存、恢复层和渲染图像等等操作，而不用依赖像Adobe Flash player和silverlight之类的外部插件。
在这篇文章中，我们将编写一个Javascript插件来使大家可以在canvas上随意涂写和绘画，就像一块涂鸦画板一样。另外再添加一些额外的小功能，如选择线条的宽度和颜色。
画板的最终效果就像下面这样，尝试在上面用鼠标画画看：
清空画板
Line width : 1
3
5
7
9
11
Color : black
blue
red
green
yellow
gray
HTML代码
我们需要一个用于绘画的canvas元素和一些用于选择操作的下拉框：
清空画板
Line width :
1
3
5
7
9
11
Color :
black
blue
red
green
yellow
gray
JAVASCRIPT
我们的涂鸦画板js脚本主要有三个函数：
InitThis()：该方法用于初始化所需要的鼠标事件。
Draw()：该方法在鼠标左键被按下时每次移动都会画一条线。
clearArea()：该方法用于清空画板上的所有线条。
var mousePressed = false;
var lastX, lastY;
var ctx;
function InitThis() {
ctx = document.getElementById('myCanvas').getContext("2d");
$('#myCanvas').mousedown(function (e) {
mousePressed = true;
Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
});
$('#myCanvas').mousemove(function (e) {
if (mousePressed) {
Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
}
});
$('#myCanvas').mouseup(function (e) {
mousePressed = false;
});
$('#myCanvas').mouseleave(function (e) {
mousePressed = false;
});
}
function Draw(x, y, isDown) {
if (isDown) {
ctx.beginPath();
ctx.strokeStyle = $('#selColor').val();
ctx.lineWidth = $('#selWidth').val();
ctx.lineJoin = "round";
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.closePath();
ctx.stroke();
}
lastX = x; lastY = y;
}
function clearArea() {
// Use the identity matrix while clearing the canvas
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
在页面加载完毕后调用InitThis()，canvas现在就是一块涂鸦画板了。快来试一试吧！
如果你需要将画板上画好的内容上传并保存在服务器上，还需要添加一些代码，我们将在下一个教程中讲解它。
