HTML5畫板代碼嵌入手機
使用HTML5的canvas標簽繪制簡單畫板,可以嵌入到手機網頁中,實現在手機上繪制簡單圖形的功能。
<canvas id="canvas" width="300" height="300"></canvas> <script> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var isDrawing = false; var lastX = 0; var lastY = 0; canvas.addEventListener('touchstart', function(e){ isDrawing = true; lastX = e.touches[0].clientX - canvas.offsetLeft; lastY = e.touches[0].clientY - canvas.offsetTop; }); canvas.addEventListener('touchmove', function(e){ if (!isDrawing) return; var currentX = e.touches[0].clientX - canvas.offsetLeft; var currentY = e.touches[0].clientY - canvas.offsetTop; context.beginPath(); context.moveTo(lastX, lastY); context.lineTo(currentX, currentY); context.stroke(); lastX = currentX; lastY = currentY; }); canvas.addEventListener('touchend', function(e){ isDrawing = false; }); </script>
該代碼中,canvas標簽定義了畫板的大小,并在Javascript中獲取了畫布的上下文對象,以及繪制相關的屬性和方法。在touchstart、touchmove、touchend事件中,通過獲取觸屏的坐標并計算其相對于畫布的位置,記錄下繪制路徑的起始點、移動點、顏色等信息,并通過canvas的stroke()方法實現繪制。
通過將該代碼嵌入到手機網頁中,在手機瀏覽器中打開即可使用簡單畫板進行繪制。特別地,可以通過CSS樣式對canvas進行定位和樣式修飾,以適配不同的手機屏幕和主題。
下一篇HTML5畫樹陰影代碼