Проследите линию на холсте, используя 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();
});