用HTML5的Canvas写字的例子

来源：互联网发布：淘宝店如何做起来编辑：程序博客网时间：2024/05/01 04:03

http://blog.csdn.net/arui319/article/details/6749892

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

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

<html> <head>  <title>write demo</title>  </head> <body><canvas width="800" height="450"></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 = 0; var flag = 0; 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); }   }   hue = 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 = 0;  linex.push(evt.layerX); liney.push(evt.layerY); linen.push(0); }</script></body></html>

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

---------------------------------------------------------------------------

GL（arui319）

http://blog.csdn.net/arui319

<本文可以转载，但是请保留以上作者信息。谢谢。>

---------------------------------------------------------------------------