当前访客身份:游客 [ 登录 | 加入 OSCHINA ]

代码分享

当前位置:
代码分享 » JavaScript  » 网页设计与交互
杨军军

用HTML5的Canvas写字的例子

杨军军 发布于 2011年11月18日 20时, 1评/9104阅
分享到: 
收藏 +0
1
利用 HTML Canvas 2D Context来模拟写字版,运行效果。代码来源: http://www.oschina.net/question/163910_31623
标签: HTML5

代码片段(2) [全屏查看所有代码]

1. [代码][HTML]代码     跳至 [1] [全屏预览]

<html>  
 <head>  
  <title>write demo</title>  
  </head>  
 <body>  
<canvas width="800" height="450" style="border:1px solid black"></canvas>  
<div id="info">-</div>
<script>  
 var canvas = document.getElementsByTagName('canvas')[0];  
 canvas.addEventListener('mousemove', onMouseMove, false);  
 canvas.addEventListener('mousedown', onMouseDown, false);  
 canvas.addEventListener('mouseup', onMouseUp, false);  
  
 var info = document.getElementById('info');
 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);  
             }  
       }  
  
       huehue = hue + 10 * Math.random();  
       context.strokeStyle = 'hsl(' + hue + ', 50%, 50%)';  
       context.shadowColor = 'white';  
       context.shadowBlur = 10;  
       context.stroke();  
       context.restore();  
    }  
  info.firstChild.nodeValue ='x = ' + evt.layerX + ' y = ' + evt.layerY;
 }  
 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>  

2. [图片] QQ截图20111118203420.png    



开源中国-程序员在线工具:Git代码托管 API文档大全(120+) JS在线编辑演示 二维码 更多»

发表评论 回到顶部 网友评论(1)

  • 1楼:张思豪 发表于 2012-07-07 17:48 回复此评论
    学习,学习,求原理  
开源从代码分享开始 分享代码