PTT數位生活區 / Web_Design

[問題] 關於js取得滑鼠座標

看板Web_Design作者 (116U質文)時間7年前 (2018/04/10 23:38), 7年前編輯推噓0(0推 0噓 7→)
留言7則, 1人參與, 7年前最新討論串1/1
各位大大好 小弟最近跟朋友組團 利用閒餘時間寫程式 最近寫了一個cancvas <canvas id="draw" onmousedown="start()" onmousemove="move()" onmouseup="stop()"> 簡單說就是要畫直線(小畫家那種 可任意拉的@@) 現在任意畫可以 但畫直線出了點問題 目前暫定想法是在start()輸出滑鼠座標給move() 現在問題是 不知道該如何輸出@@ function start() { draws = true; //進入繪圖模式 context.beginPath();//繪畫開始 startPoint = { x: event.clientX, y: event.clientY } return startPoint; } function move(startPoint) { if (draws) { context.moveTo(startPoint.x, startPoint.y); context.lineTo(event.clientX, event.clientY); //下一點 context.stroke(); //繪畫 } } 很明顯的startPoint 有問題 但不知道該如何解決>< 謝謝版上的大神 -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 122.121.68.243 ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1523374699.A.A35.html ※ 編輯: nckux56 (122.121.68.243), 04/10/2018 23:41:39
→
04/11 04:19, 7年前 , 1F
canvas畫完就是畫完了，畫過的不能改，只能覆蓋。所以你
04/11 04:19, 1F
→
04/11 04:19, 7年前 , 2F
需要用clearRect()把原先的畫清空、再依據滑鼠位置補上新
04/11 04:19, 2F
→
04/11 04:19, 7年前 , 3F
的線。
04/11 04:19, 3F
→
04/11 04:21, 7年前 , 4F
至於不同函數間存取值，最直接的是全域變數，有興趣的話g
04/11 04:21, 4F
→
04/11 04:21, 7年前 , 5F
oogle一下也有比較不污染全域的做法，這裡不多談。
04/11 04:21, 5F
→
04/11 04:26, 7年前 , 6F
另外為了清空canvas時，不要清空原先的畫，你需要getImag
04/11 04:26, 6F
→
04/11 04:26, 7年前 , 7F
eData()、putImageData()幫助你存取canvas內容
04/11 04:26, 7F
‣ 更多 nckux56 的文章
文章代碼(AID): #1QpDfher (Web_Design)
Web_Design 近期熱門文章
更多 近期熱門文章 >>
PTT數位生活區 即時熱門文章
更多 即時熱門文章 >>
‣ 更多 nckux56 的文章
文章代碼(AID): #1QpDfher (Web_Design)