Question

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

<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>

Answer 1

以下是允许用户点击圆圈以在新浏览器标签中打开指定网址的一种方式。

首先创建1+链接对象，指定画布上的点击区域和所需的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
    });
}

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

如果点击了任何特定的链接区域，请在新的浏览器选项卡中打开相应的网址：

$("#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>

使画布的一部分链接到另一个网页

1 个答案: