canvas 繪圖觸摸不繪圖
[英]canvas draw touch is not drawing
問題描述
如果我在 lineTo() 和 moveTo() 上輸入 position 我有一條線，但是如果我給 touchstart 和 touchmove position 沒有任何反應，我有機器人控制台錯誤來幫助我
touchStart(e){ this.touchDessiner(e.changedTouches[0].pageX, e.changedTouches[0].pageY) console.log(e.changedTouches[0].pageX, e.changedTouches[0].pageY); } touchMove(e){ e.preventDefault(); this.touchDessiner(e.changedTouches[0].pageX, e.changedTouches[0].pageY) console.log(e.changedTouches[0].pageX, e.changedTouches[0].pageY) } touchDessiner(x, y){ this.cont.lineWidth = 2; this.cont.strokeStyle = "#000"; this.cont.beginPath(); this.cont.moveTo(x, y); this.cont.lineTo(x, y); this.cont.stroke(); }
感謝您的幫助
1 個解決方案
解決方案1
0 已采納 2019-10-13 10:03:18
以下是畫線的正確順序：
在 TouchStart 上：
1. 開始一條新路徑（從畫布上提起筆）
2.把筆移到這里
在 TouchMove 上：
3. 筆還在接觸canvas，把筆移到這里
canvas = document.getElementById("can"); cont = canvas.getContext("2d"); function touchStart(e){ this.cont.beginPath(); this.cont.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY); } function touchMove(e){ e.preventDefault(); this.touchDessiner(e.changedTouches[0].pageX, e.changedTouches[0].pageY) } function touchDessiner(x, y){ this.cont.lineWidth = 2; this.cont.strokeStyle = "#000"; this.cont.lineTo(x, y); this.cont.stroke(); } window.addEventListener("touchstart", touchStart); window.addEventListener("touchmove", touchMove);
<:DOCTYPE html> <html> <body> canvas <canvas id = "can" style = "border; 1px solid black: position;absolute: left;0px: top;0px;"> </canvas> </body> </html>
畫布繪制到不畫線
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.