javascript - 使用 JavaScript 在画布上描线

Question

我正在学习 HTML5，我想学习的示例之一是在画布上创建 2 个点，我应该能够在 2 个点之间追踪一条线并将它们连接起来，这应该使用鼠标和触摸事件来完成移动设备。

是否有提供这些 API 的框架，或者是否有任何示例可供我参考？

Answer 1

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);
}

Answer 2

我编写了一个非常基本的片段，可以帮助您入门：http: //jsfiddle.net/vF4dY/。

var ctx = $('canvas').get(0).getContext('2d');

$('canvas').mousedown(function(e) {
    ctx.beginPath();
    ctx.moveTo(e.offsetX, e.offsetY);
});

$('canvas').mouseup(function(e) {
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
});