javascript - JavaScriptを使用してキャンバス上の線をトレースします

Question

HTML5を学習しています。学習したい例の1つは、キャンバス上に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();
});