我正在学习 HTML5,我想学习的示例之一是在 Canvas 上创建 2 个点,我应该能够在这 2 个点之间追踪一条线并将它们连接起来,这应该使用鼠标和移动设备上的触摸事件。
是否有提供这些 API 的任何框架,或者是否有任何我可以查看以开始使用的示例?
最佳答案
window.onload=function(){
var canvas = document.getElementById('canvas');
var ctx=canvas.getContext('2d');
var mouse={x:0,y:0}, down=false, lines=[]
canvas.addEventListener("mousedown",function(e) {
down=true
mouse={x:e.pageX,y:e.pageY}
},false);
canvas.addEventListener("mousemove",function(e) {
this.width=this.width
lines.map(function(item){
ctx.beginPath()
ctx.moveTo(item[0].x, item[0].y);
ctx.lineTo(item[1].x, item[1].y);
ctx.stroke();
})
if(down){
ctx.beginPath();
ctx.moveTo(mouse.x, mouse.y);
ctx.lineTo(e.pageX-this.offsetLeft, e.pageY-this.offsetTop);
ctx.stroke()
}
},false);
canvas.addEventListener("mouseup",function(e) {
down=false
this.width=this.width
lines.push([{x:mouse.x,y:mouse.y},{x:e.pageX-this.offsetLeft,y:e.pageY-this.offsetTop}])
lines.map(function(item){
ctx.beginPath()
ctx.moveTo(item[0].x, item[0].y);
ctx.lineTo(item[1].x, item[1].y);
ctx.stroke();
})
},false);
}
关于javascript - 使用 JavaScript 在 Canvas 上描绘一条线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5519061/