画布绘图触摸不是绘图
如果我在 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();
}
一只甜甜圈浏览 114回答 1
1回答
-
慕桂英4014372
下面是画线的正确顺序：在 TouchStart 上：1. 开始一条新路径（从画布上提起笔）2. 将笔移到这里在 TouchMove 上：3. 在笔仍然接触画布的情况下，将笔移到此处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>
随时随地看视频慕课网APP
相关分类
JavaScript