久久99精品国产麻豆宅宅,精品人妻无码一区二区色欲产成人,国产一区二区三区久久精品小说

亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

最近項目輕松了一些，就抱著學習的態度閱讀了 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

<本文可以轉載，但是請保留以上作者信息。謝謝。>

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

用HTML5的Canvas寫字的例子

更多文章、技術交流、商務合作、聯系博主

微信掃碼或搜索：z360901061

微信掃一掃加我為好友

QQ號聯系： 360901061

您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。

【本文對您有幫助就好】元

2元

5元

10元

20元

自定義