用HTML5的Canvas写字的例子_H5之家 - 中国HTML5教程资源分享第一站

最近项目轻松了一些，就抱着学习的态度阅读了HTML Canvas 2D Context的内容。又想到以前曾经在Android上做过原笔迹手写的内容，就想试着在HTML5中简单做一下看看。摸索着完成了demo。下面是在 Google Chrome 13.0版本上的效果。

用HTML5的Canvas写字的例子

下面附上代码，仅仅为学习，没做优化，作为例子吧。

注：要在支持HTML5的浏览器上运行才能看到效果。

<html> <head> <title>write demo</title> </head> <body> <canvas></canvas> <script> var canvas = document.getElementsByTagName('canvas')[0]; canvas.addEventListener('mousemove', onMouseMove, false); canvas.addEventListener('mousedown', onMouseDown, false); canvas.addEventListener('mouseup', onMouseUp, false); var context = canvas.getContext('2d'); var linex = new Array(); var liney = new Array(); var linen = new Array(); var lastX = -1; var lastY = -1; var hue = ; var flag = ; function onMouseMove(evt) { if (flag == 1) { linex.push(evt.layerX); liney.push(evt.layerY); linen.push(1); context.save(); context.translate(context.canvas.width/2, context.canvas.height/2); context.translate(-context.canvas.width/2, -context.canvas.height/2); context.beginPath(); context.lineWidth = 5 + Math.random() * 10; for (var i=1;i<linex.length;i++) { lastX = linex[i]; lastY = liney[i]; if (linen[i] == 0) { context.moveTo(lastX,lastY); } else { context.lineTo(lastX,lastY); } } huehue = hue + 10 * Math.random(); context.strokeStyle = 'hsl(' + hue + ', 50%, 50%)'; context.shadowColor = 'white'; context.shadowBlur = 10; context.stroke(); context.restore(); } } function onMouseDown(evt) { flag = 1; linex.push(evt.layerX); liney.push(evt.layerY); linen.push(0); } function onMouseUp(evt) { flag = ; linex.push(evt.layerX); liney.push(evt.layerY); linen.push(0); } </script> </body> </html>文章出处：