canvas draw touch 不是绘图
canvas draw touch is not drawing
如果我在 lineTo() 和 moveTo() 上输入一个位置,我有一条线,但如果我给出 touchstart 和 touchmove 位置,则没有任何反应,我有机器人控制台错误来帮助我
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();
}
感谢您的帮助
画线的正确顺序是:
在 TouchStart 上:
1.开始新的路径(从canvas起笔)
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>
如果我在 lineTo() 和 moveTo() 上输入一个位置,我有一条线,但如果我给出 touchstart 和 touchmove 位置,则没有任何反应,我有机器人控制台错误来帮助我
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();
}
感谢您的帮助
画线的正确顺序是:
在 TouchStart 上:
1.开始新的路径(从canvas起笔)
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>