HTML5的canvas元素是HTML5新特性中最有用的元素之一。通过html5 canvas，我们可以做图像处理、绘图、保存、恢复层和渲染图像等等操作，而不用依赖像Adobe Flash player和silverlight之类的外部插件。

在这篇文章中，我们将编写一个Javascript插件来使大家可以在canvas上随意涂写和绘画，就像一块涂鸦画板一样。另外再添加一些额外的小功能，如选择线条的宽度和颜色。

画板的最终效果就像下面这样，尝试在上面用鼠标画画看：

清空画板 Line width : Color :

HTML代码

我们需要一个用于绘画的canvas元素和一些用于选择操作的下拉框：

<div> <canvas></canvas> <div> <button type="button">清空画板</button> Line width : <select> <option value="1">1</option> <option value="3">3</option> <option value="5">5</option> <option value="7">7</option> <option value="9" selected="selected">9</option> <option value="11">11</option> </select> Color : <select> <option value="black">black</option> <option value="blue" selected="selected">blue</option> <option value="red">red</option> <option value="green">green</option> <option value="yellow">yellow</option> <option value="gray">gray</option> </select> </div> </div> JAVASCRIPT

我们的涂鸦画板js脚本主要有三个函数：

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现在就是一块涂鸦画板了。快来试一试吧！

如果你需要将画板上画好的内容上传并保存在服务器上，还需要添加一些代码，我们将在下一个教程中讲解它。