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

作者: nckux56 (116U質文)   2018-04-10 23:38:16
各位大大好
小弟最近跟朋友組團 利用閒餘時間寫程式
最近寫了一個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 有問題 但不知道該如何解決><
謝謝版上的大神
作者: jhnny97 (≡(  ゚Д゚))   2018-04-11 04:19:00
canvas畫完就是畫完了,畫過的不能改,只能覆蓋。所以你需要用clearRect()把原先的畫清空、再依據滑鼠位置補上新的線。至於不同函數間存取值,最直接的是全域變數,有興趣的話google一下也有比較不污染全域的做法,這裡不多談。另外為了清空canvas時,不要清空原先的畫,你需要getImageData()、putImageData()幫助你存取canvas內容

Links booklink

Contact Us: admin [ a t ] ucptt.com