手寫簽名 · PHP/Python/前端/Linux 等等學習筆記

[TOC] ## 概述同時支持鼠標與觸控 ``` <body> <canvas id="canvas" width="600" height="600" style="border:solid black 1px;"> 你的瀏覽器不支持 canvas 元素。 </canvas> 日志：<pre id="log" style="border: 1px solid #ccc;"></pre> <script> const ongoingTouches = []; let mouseDown=false; window.onload = function startup() { const el = document.getElementsByTagName("canvas")[0]; el.addEventListener("touchstart", handleStart, false); el.addEventListener("touchend", handleEnd, false); el.addEventListener("touchmove", handleMove, false); el.addEventListener("mousemove", handleMouseMove, false); el.addEventListener("mousedown", handleMouseDown, false); el.addEventListener("mouseup", handleMouseUp, false); log("初始化成功。") } function handleStart(evt) { evt.preventDefault(); console.log("觸摸開始。"); const el = document.getElementsByTagName("canvas")[0]; const ctx = el.getContext("2d"); const touches = evt.changedTouches; for (let i = 0; i < touches.length; i++) { console.log("開始第 " + i + " 個觸摸 ..."); ongoingTouches.push(copyTouch(touches[i])); const color = colorForTouch(touches[i]); ctx.beginPath(); console.log(touches[i]); // arc(x,y, radius, startAngle, endAngle, counterclockwise?) ctx.arc(touches[i].pageX, touches[i].pageY, 0, 0, 2 * Math.PI, true); // 在起點畫一個圓。 ctx.fillStyle = color; ctx.fill(); console.log("第 " + i + " 個觸摸已開始。"); } } function handleMouseMove(evt) { evt.preventDefault(); if (!mouseDown){ return false; } const el = document.getElementsByTagName("canvas")[0]; const ctx = el.getContext("2d"); console.log(evt.pageX); console.log(evt.pageY); ctx.beginPath(); ctx.moveTo(evt.pageX,evt.pageY) ctx.lineTo(evt.pageX+1,evt.pageY+1) ctx.lineWidth = 4; ctx.strokeStyle = "#000"; ctx.stroke() console.log("."); } function handleMouseDown(evt) { evt.preventDefault(); mouseDown=true; } function handleMouseUp(evt) { evt.preventDefault(); mouseDown=false; } function handleMove(evt) { evt.preventDefault(); const el = document.getElementsByTagName("canvas")[0]; const ctx = el.getContext("2d"); const touches = evt.changedTouches; for (let i = 0; i < touches.length; i++) { const color = colorForTouch(touches[i]); const idx = ongoingTouchIndexById(touches[i].identifier); if (idx >= 0) { log("繼續第 " + idx + "個觸摸。"); ctx.beginPath(); log("ctx.moveTo(" + ongoingTouches[idx].pageX + ", " + ongoingTouches[idx].pageY + ");"); ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY); log("ctx.lineTo(" + touches[i].pageX + ", " + touches[i].pageY + ");"); ctx.lineTo(touches[i].pageX, touches[i].pageY); ctx.lineWidth = 4; ctx.strokeStyle = color; ctx.stroke(); ongoingTouches.splice(idx, 1, copyTouch(touches[i])); // 切換觸摸信息 console.log("."); } else { log("無法確定下一個觸摸點。"); } } } function handleEnd(evt) { evt.preventDefault(); log("觸摸結束。"); const el = document.getElementsByTagName("canvas")[0]; const ctx = el.getContext("2d"); touches = evt.changedTouches; for (let i = 0; i < touches.length; i++) { const color = colorForTouch(touches[i]); const idx = ongoingTouchIndexById(touches[i].identifier); if (idx >= 0) { ctx.lineWidth = 4; ctx.fillStyle = color; ctx.beginPath(); ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY); ctx.lineTo(touches[i].pageX, touches[i].pageY); ctx.fillRect(touches[i].pageX - 4, touches[i].pageY - 4, 8, 8); // 在終點畫一個正方形 ongoingTouches.splice(idx, 1); // 用完后移除 } else { log("無法確定要結束哪個觸摸點。"); } } } function handleEnd(evt) { evt.preventDefault(); log("觸摸結束。"); const el = document.getElementsByTagName("canvas")[0]; const ctx = el.getContext("2d"); touches = evt.changedTouches; for (let i = 0; i < touches.length; i++) { const color = colorForTouch(touches[i]); const idx = ongoingTouchIndexById(touches[i].identifier); if (idx >= 0) { ctx.lineWidth = 4; ctx.fillStyle = color; ctx.beginPath(); ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY); ctx.lineTo(touches[i].pageX, touches[i].pageY); ctx.fillRect(touches[i].pageX - 4, touches[i].pageY - 4, 8, 8); // 在終點畫一個正方形 ongoingTouches.splice(idx, 1); // 用完后移除 } else { log("無法確定要結束哪個觸摸點。"); } } } //為每個觸摸點選擇一個顏色 function colorForTouch(touch) { let r = touch.identifier % 16; let g = Math.floor(touch.identifier / 3) % 16; let b = Math.floor(touch.identifier / 7) % 16; r = r.toString(16); // 轉換為十六進制字符串 g = g.toString(16); // 轉換為十六進制字符串 b = b.toString(16); // 轉換為十六進制字符串 const color = "#" + r + g + b; log("identifier " + touch.identifier + " 觸摸的顏色為：" + color); return color; } //拷貝觸摸對象 function copyTouch(touch) { return { identifier: touch.identifier, pageX: touch.pageX, pageY: touch.pageY }; } //查找觸摸點 function ongoingTouchIndexById(idToFind) { for (let i = 0; i < ongoingTouches.length; i++) { const id = ongoingTouches[i].identifier; if (id == idToFind) { return i; } } return -1; // 未找到 } function log(msg) { const p = document.getElementById('log'); p.innerHTML = msg + "\n" + p.innerHTML; } </script> </body> ```