javascript - 将 Canvas 的一部分链接到另一个网页-6ren

javascript - 将 Canvas 的一部分链接到另一个网页

转载作者：行者123 更新时间：2023-12-03 12:12:32

我目前有一个代码，可以简单地在 Canvas 上绘制圆圈。但是，我希望这些圈子能够在用户选择再次单击该圈子时将其引导至给定链接。但我并不完全确定如何实现这一点。简单来说，绘制的对象是否可以用作点击事件来引导用户到另一个网页？

http://jsfiddle.net/PTDy9/

<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>

<body>

<img id="graph" style=display:none src="http://i47.tinypic.com/29zr14o.jpg" alt="graph" >

<canvas id="myCanvas" width="700" height="400" style="border:1px solid #FFFFF;">

<script>
var c=document.getElementById("myCanvas"); 
        var ctx=c.getContext("2d"); 
        var img=document.getElementById("graph"); 
        ctx.drawImage(img,0,0); 
        var color_list = ["#FFC0CB", "#00ffff", "#DA70D6", "#90EE90", "#FF8C00", "#CD853F"];
        var color_iter = 0;
        var bullet_y = 450;
        var width = img.naturalWidth;
        var height = img.naturalHeight;
        jQuery(document).ready(function(){
             $("#myCanvas").click(function(e){ 

                var x = e.pageX - this.offsetLeft;
                var y = e.pageY - this.offsetTop; 

                if (x < width && y < height) {
                    var ctx= this.getContext("2d"); 
                    ctx.beginPath();
                    ctx.arc(x, y, 10,0, 2*Math.PI);
                    color = color_list[color_iter];
                    ctx.strokeStyle = color;
                    ctx.fillStyle = color;
                    if (color_iter == color_list.length-1) {
                        color_iter = 0;
                        }
                    else {color_iter = color_iter + 1;}
                    ctx.fillStyle = color;
                    ctx.globalAlpha = .4;
                    ctx.fill();
                    ctx.stroke();
                    var a = document.createElement('a');
                    }
           }); 
        }) 
</script>
</body>

最佳答案

这是一种让用户单击圆圈以在新的浏览器选项卡中打开指定网址的方法。

首先创建 1+ 个链接对象，指定 Canvas 上的点击区域和所需的 url:

var links=[];

addLink(75,75,30,"Google","http://www.google.com");
addLink(150,150,30,"CNN","http://www.cnn.com");

function addLink(x,y,radius,label,url){
    links.push({
        cx:x, 
        cy:y, 
        radius:radius,
        label:label,
        link:url
    });
}

然后监听鼠标点击并测试是否点击了任何链接区域。

如果单击任何特定链接区域，则在新的浏览器选项卡中打开相应的 URL:

$("#canvas").mousedown(function(e){handleMouseDown(e);});

function handleMouseDown(e){

    e.preventDefault();
    e.stopPropagation();

    mx=parseInt(e.clientX-offsetX);
    my=parseInt(e.clientY-offsetY);

    for(var i=0;i<links.length;i++){
        var link=links[i];
        var dx=link.cx-mx;
        var dy=link.cy-my;
        if(dx*dx+dy*dy<link.radius*link.radius){
            window.open(link.link,'_blank');
        }
    }
}

完整示例代码:

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>
<script>
$(function(){

    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 links=[];

    addLink(75,75,30,"Google","http://www.google.com");
    addLink(150,150,30,"CNN","http://www.cnn.com");

    drawLinks();

    $("#canvas").mousedown(function(e){handleMouseDown(e);});

    function addLink(x,y,radius,label,url){
        links.push({
            cx:x, 
            cy:y, 
            radius:radius,
            label:label,
            link:url
        });
    }

    function drawLinks(){
        ctx.save();
        ctx.fillStyle="green";
        ctx.fillRect(0,0,canvas.width,canvas.height);
        ctx.font="14px verdana";
        ctx.textAlign="center";
        ctx.textBaseline="middle";
        for(var i=0;i<links.length;i++){
            var link=links[i];
            ctx.beginPath();
            ctx.arc(link.cx,link.cy,link.radius,0,Math.PI*2);
            ctx.closePath();
            ctx.fillStyle="blue";
            ctx.fill();
            ctx.fillStyle="white";
            ctx.fillText(link.label,link.cx,link.cy);
        }
        ctx.restore();
    }


    function handleMouseDown(e){
        e.preventDefault();
        e.stopPropagation();

        mx=parseInt(e.clientX-offsetX);
        my=parseInt(e.clientY-offsetY);

        for(var i=0;i<links.length;i++){
            var link=links[i];
            var dx=link.cx-mx;
            var dy=link.cy-my;
            if(dx*dx+dy*dy<link.radius*link.radius){
                window.open(link.link,'_blank');
            }
        }
    }

}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>