用HTML5的Canvas写字的例子

runfeel

浏览: 936091 次

最近访客更多访客>>

lxin410

gaozzsoft

hudaafei

seancheer

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1069)

社区版块

存档分类

2013-08 ( 1)
2013-07 ( 211)
2013-06 ( 235)
更多存档...

最近项目轻松了一些，就抱着学习的态度阅读了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

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

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

分享到：

lua的学习笔记 | 【cocos2dx开发技巧7】脚本lua的使用--集 ...

2013-06-23 15:04
浏览 1402
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

用HTML5的Canvas写字的例子

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

用HTML5的Canvas写字的例子

评论

发表评论

相关推荐

最近访客更多访客>>