作者nckux56 (116U质文)
看板Web_Design
标题[问题] 关於js取得滑鼠座标
时间Tue Apr 10 23:38:16 2018
各位大大好
小弟最近跟朋友组团 利用闲余时间写程式
最近写了一个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://webptt.com/cn.aspx?n=bbs/Web_Design/M.1523374699.A.A35.html
※ 编辑: nckux56 (122.121.68.243), 04/10/2018 23:41:39
1F：→ jhnny97: canvas画完就是画完了，画过的不能改，只能覆盖。所以你 04/11 04:19
2F：→ jhnny97: 需要用clearRect()把原先的画清空、再依据滑鼠位置补上新 04/11 04:19
3F：→ jhnny97: 的线。 04/11 04:19
4F：→ jhnny97: 至於不同函数间存取值，最直接的是全域变数，有兴趣的话g 04/11 04:21
5F：→ jhnny97: oogle一下也有比较不污染全域的做法，这里不多谈。 04/11 04:21
6F：→ jhnny97: 另外为了清空canvas时，不要清空原先的画，你需要getImag 04/11 04:26
7F：→ jhnny97: eData()、putImageData()帮助你存取canvas内容 04/11 04:26