用HTML5的Canvas写字的例子

1
HTML5 JavaScript Java HTML C/C++ 17074 次浏览

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

用HTML5的Canvas写字的例子


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

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

<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 = ;  
 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>
文章出处:http://blog.csdn.net/arui319/article/details/6749892
请尽量让自己的答案能够对别人有帮助

5个答案

默认排序 按投票排序