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

[nckux56 (116U質文)]

各位大大好

小弟最近跟朋友組團 利用閒餘時間寫程式

最近寫了一個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
→ jhnny97: canvas畫完就是畫完了，畫過的不能改，只能覆蓋。所以你
→ jhnny97: 需要用clearRect()把原先的畫清空、再依據滑鼠位置補上新
→ jhnny97: 的線。
→ jhnny97: 至於不同函數間存取值，最直接的是全域變數，有興趣的話g
→ jhnny97: oogle一下也有比較不污染全域的做法，這裡不多談。
→ jhnny97: 另外為了清空canvas時，不要清空原先的畫，你需要getImag
→ jhnny97: eData()、putImageData()幫助你存取canvas內容