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