使用JavaScript跟踪画布上的一行答案

【问题标题】：Trace a line on canvas using JavaScript使用JavaScript跟踪画布上的一行
【发布时间】：2011-07-28 00:06:59
【问题描述】：

我正在学习 HTML5，我想学习的示例之一是在画布上创建 2 个点，我应该能够在 2 个点之间绘制一条线并将它们连接起来，这应该使用鼠标和移动设备上的触摸事件。

是否有提供这些 API 的框架，或者是否有任何示例可供我参考？

【问题讨论】：

我个人喜欢在没有框架的情况下这样做，但一些可用的框架包括raphaeljs.com 和processingjs.org。您可以结合触摸事件并计算应放置点的位置；然后在它们之间画一条线。
这个问题是非常开放的，快速的谷歌搜索会让你远离答案。那里有关于 webgl 和 canvas 的很好的教程，大多数主要的 javascript 框架也会帮助你获得移动设备支持，查看 jquery mobile 和 YUI。

标签： javascript events touch html5-canvas

【解决方案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);
}

【讨论】：

【解决方案2】：

我编写了一个非常基本的 sn-p，可以帮助您入门：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();
});

【讨论】：