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

使用JavaScript在画布上跟踪一行

2 个答案: