使用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(); 
});