JavaScript:为随机连接线着色

Question

我有 js 业余画家，想以这种方式工作:- 单击位置 (x1, y1)- 单击位置 (x2, y2)- 单击位置 (x3, y3)

然后我有按钮连接和程序将最后一点与第一个点连接，我得到一些内容，我可以用颜色填充它。

ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(100,100);
ctx.lineTo(70, 150);
ctx.lineTo(50, 50);
ctx.fillStyle = "000";
ctx.fill();

效果很好，但我想按照我的方式使用按钮，当我想要时连接线路:

x = event.pageX - $("#myCanvas").offset().left;
y = event.pageY - $("#myCanvas").offset().top;
if (n == 0) {
    a = x;
    b = y;
    zx = x;
    zy = y;
}
ctx.beginPath();
ctx.moveTo(a,b);
if(n != 0)
    ctx.lineTo(x,y);
ctx.stroke();
a = x;
b = y;
n = 1;

向下，我有关闭线路的功能(连接第一个和最后一个以获取连接的线路)。

 jQuery('#connect').click(function () {
    if ((this.id == 'connect') && (
        //ctx.beginPath();
        ctx.moveTo(a, b);
        ctx.lineTo(zx, zy);
        //ctx.closePath();
        ctx.fillStyle = bpolnila.toString();
        ctx.fill();
        ctx.stroke();
    }
});

这里出了什么问题，我尝试了很多，但我的连接线只是不想填充颜色。

Answer 1

我曾经创建过一个项目，用于在浏览器中在线创建 HTML 图像 map 。我还使用 Canvas 和鼠标单击在图像上绘制线条:项目:http://www.kolchose.org/simon/ajaximagemapcreator/

源代码可在 http://code.google.com/p/imagemap/ 获取。