Question

我正在尝试使用html5 canvas创建一个包含多个位置的地图。我希望每个位置都是另一个网页的链接。目前我只能使用一个链接。我试图遍布这些地点，有大约15个地点有个别链接。这是我一直试图使用的代码，但是它会遍历，但只有循环中的最后一个才有链接。

我最近才开始使用html5 canvas和javascript。此代码来自在线解决方案，并根据我的需要进行调整。

        link = ["websitelink1", "websitelink2", ... etc];
        links = [[x_coord1,y_coord1,width1,height1],[x_coord2,y_coord2,width2,height2], ... etc]
        canvas.addEventListener("mousemove", on_mousemove, false);
        canvas.addEventListener("click", on_click, false);
        inlink = "";

        function on_mousemove (ev) {
            var mouse_x, mouse_y;

            // Get the mouse position relative to the canvas element.
            if (ev.layerX || ev.layerX) { //for firefox
                mouse_x = ev.layerX;
                mouse_y = ev.layerY;
            }
            mouse_x-=canvas.offsetLeft;
            mouse_y-=canvas.offsetTop;

            for(n = links.length - 1; n >= 0; n--) {
                var linkX = parseInt(links[n][0]),
                    linkY = parseInt(links[n][1]),
                    linkwidth = parseInt(links[n][2]),
                    linkheight = parseInt(links[n][3]);
                    linkHref = link[n];

                //is the mouse over the link?
                if(mouse_x >= linkX && mouse_x <= (linkX + linkwidth) && mouse_y >= linkY && mouse_y <= (linkY + linkheight)) {
                    document.body.style.cursor = "pointer";
                    inLink=linkHref;
                }
                else{
                    document.body.style.cursor = "";
                    inLink="";
                }
            }
        }
        function on_click(e) {
            if (inLink != "") {
                window.open(inlink);
            }
        }

我尝试过类似的相似代码。

感谢您的帮助。

Answer 1

我在这里可以看到几个问题。

（1）你将inLink重置为循环中的“ 。这意味着如果您将鼠标悬停在链接上，循环中的剩余链接将不会悬停，并且会在循环之前将链接重置为“” - fix =将inLink设置为“”一次不能一次悬停在多个链接上，因此只能在循环内设置一次）

（2）你不一致'拼写'inLink。 - fix =确保变量的所有实例的大小写相同（inLink与inlink不同）

（3）如果您在链接上方，支票在支票中的位置可能会有歧义。

（4）通过在for循环中使用links.length，每次循环都需要重新计算。更好的方法是读取此值一次并将其存储在临时变量中。

这是一个粗略的例子，代码工作正常，在Chrome中测试过（不幸的是，这里没有FF）

注意：如果找到一个悬停链接，我还添加了break来停止循环 - 如果找到一个成功链接，则无需检查循环中的剩余链接。（这样可以加快执行速度，同时也可以达到与＃1相同的效果）

注2：更快地循环从n-1到0的循环，就像你最初做的那样 - 我只是喜欢前进。

<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}

window.addEventListener('load', onDocLoaded, false);

function onDocLoaded()
{
    outlineLinks();
    byId('can').addEventListener("mousemove", on_mousemove, false);
    // byId('can').addEventListener("click", on_click2, false);
    byId('can').addEventListener("click", on_click, false);
}

// var link = ["websitelink1", "websitelink2"];
var link = ["http://stackoverflow.com/questions/24650947/creating-multiple-links-on-html5-canvas/24652217", "http://stackoverflow.com/"];
var links = [[0,0,100,20],[0,25,100,20]];

var inLink = "";

function outlineLinks()
{
    var canvas = byId('can');
    var ctx = canvas.getContext('2d');

    var i, n = links.length;
    for (i=0; i<n; i++)
        ctx.strokeRect( links[i][0], links[i][1], links[i][2], links[i][3] );
}

function on_mousemove(evt) 
{
    var mouse_x, mouse_y;

    // Get the mouse position relative to the canvas element.
    if (evt.layerX || evt.layerX) 
    { //for firefox
        mouse_x = evt.layerX;
        mouse_y = evt.layerY;
    }
    mouse_x -= this.offsetLeft;
    mouse_y -= this.offsetTop;

    byId('coords').innerHTML = "Mouse Pos: " + mouse_x + "," + mouse_y;

    var n = links.length;
    inLink = "";
    for(i=0; i<n; i++) 
    {
        var linkX = parseInt(links[i][0]),
            linkY = parseInt(links[i][1]),
            linkwidth = parseInt(links[i][2]),
            linkheight = parseInt(links[i][3]);

        //is the mouse over the link?
        if( (mouse_x >= linkX) && (mouse_x <= (linkX + linkwidth)) && (mouse_y >= linkY) && (mouse_y <= (linkY + linkheight)))
        {
            document.body.style.cursor = "pointer";
            inLink = link[i];
            break;
        }
        else{
            document.body.style.cursor = "";
        }
    }
}
function on_click(evt)
{
    if (inLink != "")
        window.open(inLink);
}

function on_click2(evt)
{
    if (inLink != "")
        byId('tgt').innerHTML = "Navigating to: " + inLink;
    else
        byId('tgt').innerHTML = "No link is hovered";
}

</script>
<style>
</style>
</head>
<body>
    <div id='tgt'>&nbsp;</div>
    <div id='coords'>&nbsp;</div>
    <canvas id='can'></canvas>
</body>
</html>

在html5画布上创建多个链接

1 个答案: