用HTML5的Canvas寫字的例子
阿新 • • 發佈：2019-01-27
最近專案輕鬆了一些，就抱著學習的態度閱讀了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
<本文可以轉載，但是請保留以上作者資訊。謝謝。>
---------------------------------------------------------------------------