Javascript 在画布上绘制多边形形状并允许在其上显示工具提示

这基本上是我的要求，而不是一个问题，我必须在画布上绘制多边形形状（与绘制相同），我已经实现了这一点，但我仍然坚持我的要求，在绘制的每个多边形上悬停时，我必须显示工具提示。我知道对于矩形这样的形状，我可以使用简单的for循环来管理坐标，但对于多边形如何处理坐标会更容易。有可能吗？ 下面是我绘制多边形的代码

    var startPointX = "", startPointY = "", endpointX, endpointY, isnewShape = false;
tools.polygon = function () {
    var tool = this;
    this.started = false;

    this.mousedown = function (ev) {
        tool.started = true;
        tool.x0 = ev._x;
        tool.y0 = ev._y;

        if ((Math.abs(startPointX - ev._x) < 5) && (Math.abs(startPointY - ev._y) < 5) && (startPointX != ev._x && startPointY != ev._y) && !isnewShape) {
            alert('point matched');
            startPointX = "";
            startPointY = "";
            isnewShape = true;
            context.clearRect(0, 0, canvas.width, canvas.height);

            context.beginPath();
            context.moveTo(endpointX, endpointY);

            context.lineTo(ev._x, ev._y);
            endpointX = ev._x;
            endpointY = ev._y;
            context.stroke();
            context.closePath();
            img_update();
            tool.started = false;
        }
        else {
            //                console.log(isnewShape);

            if (startPointX == "" || startPointY == "")
                return;

            context.clearRect(0, 0, canvas.width, canvas.height);

            context.beginPath();
            context.moveTo(endpointX, endpointY);
            isnewShape = false;
            context.lineTo(ev._x, ev._y);
            endpointX = ev._x;
            endpointY = ev._y;
            context.stroke();
            context.closePath();
            img_update();
        }

    };

    this.mousemove = function (ev) {
        if (!tool.started) {
            return;
        }
        // console.log('mousemove');
        context.clearRect(0, 0, canvas.width, canvas.height);

        context.beginPath();
        context.lineTo(ev._x, ev._y);
        endpointX = ev._x;
        endpointY = ev._y;
        context.stroke();
        context.closePath();
    };

    this.mouseup = function (ev) {
        if (tool.started) {

            if (startPointX == "" && startPointY == "") {

                startPointX = tool.x0;
                startPointY = tool.y0;

           }

            tool.started = false;
            img_update();
        }
    };
};

var startPointX=“”，startPointY=“”，endpointX，endpointY，isnewShape=false；
tools.polygon=函数（）{
var工具=这个；
this.start=false；
this.mousedown=函数（ev）{
tool.started=true；
工具x0=ev.\u x；
工具y0=ev.\u y；
如果（（数学abs（起点-ev.\ux）<5）和&（数学abs（起点-ev.\uy）<5）和&（起点=ev.\ux和起点=ev.\uy）和&！isnewShape）{
警报（“点匹配”）；
startPointX=“”；
startpoint=“”；
isnewShape=true；
clearRect（0，0，canvas.width，canvas.height）；
context.beginPath（）；
moveTo（endpointX，endpointY）；
上下文行（ev.\ux，ev.\uy）；
端点x=ev.x；
端点y=ev.\u y；
stroke（）；
closePath（）；
img_update（）；
tool.start=false；
}
否则{
//console.log（isnewShape）；
如果（起点X==“”| |起点Y==“”）
返回；
clearRect（0，0，canvas.width，canvas.height）；
context.beginPath（）；
moveTo（endpointX，endpointY）；
isnewShape=false；
上下文行（ev.\ux，ev.\uy）；
端点x=ev.x；
端点y=ev.\u y；
stroke（）；
closePath（）；
img_update（）；
}
};
this.mousemove=函数（ev）{
如果（！tool.started）{
返回；
}
//console.log（'mousemove'）；
clearRect（0，0，canvas.width，canvas.height）；
context.beginPath（）；
上下文行（ev.\ux，ev.\uy）；
端点x=ev.x；
端点y=ev.\u y；
stroke（）；
closePath（）；
};
this.mouseup=函数（ev）{
如果（工具启动）{
如果（起始点X==“”&&起始点Y==“”）{
startPointX=tool.x0；
起始点Y=tool.y0；
}
tool.start=false；
img_update（）；
}
};
};

在维护用户看到的画布的同时，在第二个隐藏的画布上绘制所有内容。重要的是每个多边形都应该有自己的颜色。它不必是人类可以识别的——你可以把第一个画成

\000000

，第二个画成

\000001

，依此类推。这为1600万个多边形提供了支持-应该足够了

---

然后，当用户在画布上移动鼠标时，找出鼠标的位置并查看隐藏画布上的颜色。这将告诉您悬停在哪个形状上，您可以采取相应的行动。

除了维护用户看到的画布外，还可以在第二个隐藏的画布上绘制所有内容。重要的是每个多边形都应该有自己的颜色。它不必是人类可以识别的——你可以把第一个画成

\000000

，第二个画成

\000001

，依此类推。这为1600万个多边形提供了支持-应该足够了

---

然后，当用户在画布上移动鼠标时，找出鼠标的位置并查看隐藏画布上的颜色。这将告诉您悬停在哪个形状上，您可以相应地进行操作。

您可以使用canvas内置的命中测试方法：context.isPointInPath（x，y）

isPointInPath将测试x、y是否位于最近定义的路径内

它的工作原理如下：

假设您有定义每个多边形的坐标

// create an object holding all polygon points

var triangle=[{x:100,y:50},{x:150,y:100},{x:50,y:100}];

要执行命中测试，请首先重新定义三角形：

// define the polygon

function define(polygon){
    ctx.beginPath();
    ctx.moveTo(polygon[0].x,polygon[0].y);
    for(var i=1;i<polygon.length;i++){
        ctx.lineTo(polygon[i].x,polygon[i].y);
    }
    ctx.closePath();
}

下面是示例代码和演示：

正文{背景色：象牙；}
#画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var$canvas=$（“#canvas”）；
var canvasOffset=$canvas.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
var scrollX=$canvas.scrollLeft（）；
var scrollY=$canvas.scrollTop（）；
var$results=$（“#results”）；
//创建包含所有多边形点的对象
变量三角形=[{x:100，y:50}，{x:150，y:100}，{x:50，y:100}]；
//画多边形
定义（三角形）；
ctx.fill（）；
//定义多边形
函数定义（多边形）{
ctx.beginPath（）；
移动到（多边形[0].x，多边形[0].y）；
对于（var i=1；i您可以使用canvas的内置命中测试方法：context.isPointInPath（x，y）；

isPointInPath将测试x、y是否位于最近定义的路径内

它的工作原理如下：

假设您有定义每个多边形的坐标

// create an object holding all polygon points

var triangle=[{x:100,y:50},{x:150,y:100},{x:50,y:100}];

要执行命中测试，请首先重新定义三角形：

// define the polygon

function define(polygon){
    ctx.beginPath();
    ctx.moveTo(polygon[0].x,polygon[0].y);
    for(var i=1;i<polygon.length;i++){
        ctx.lineTo(polygon[i].x,polygon[i].y);
    }
    ctx.closePath();
}

下面是示例代码和演示：


正文{背景色：象牙；}
#画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var$canvas=$（“#canvas”）；
var canvasOffset=$canvas.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
var scrollX=$canvas.scrollLeft（）；
var scrollY=$canvas.scrollTop（）；
var$results=$（“#results”）；
//创建包含所有多边形点的对象
变量三角形=[{x:100，y:50}，{x:150，y:100}，{x:50，y:100}]；
//画多边形
定义（三角形）；
ctx.fil