如何将超链接添加到画布元素中的图像？

Question

我正在动态地将多个图像添加到HTML5 canvas元素。我想超链接这些图像。我尝试过不同的方式，但它不适合我。有人知道该怎么做吗？

Answer 1

我明白了。这里是[DEMO]

var canvas = document.getElementById("myCanvas"); 
var ctx; 
var linkText="http://google.com"; 
var linkX=5; 
var linkY=15; 
var linkHeight=10; 
var linkWidth; 
var inLink = false; 

// draw the balls on the canvas 
function draw(){ 
    canvas = document.getElementById("myCanvas"); 
    // check if supported 
    if(canvas.getContext){ 

    ctx=canvas.getContext("2d"); 

    //clear canvas 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 

    //draw the link 
    ctx.font='10px sans-serif'; 
    ctx.fillStyle = "#0000ff"; 
    ctx.fillText(linkText,linkX,linkY); 
    linkWidth=ctx.measureText(linkText).width; 

    //add mouse listeners 
    canvas.addEventListener("mousemove", on_mousemove, false); 
    canvas.addEventListener("click", on_click, false); 

    } 
} 

//check if the mouse is over the link and change cursor style 
function on_mousemove (ev) { 
    var x, y; 

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

    //is the mouse over the link? 
    if(x>=linkX && x <= (linkX + linkWidth) && y<=linkY && y>= (linkY-linkHeight)){ 
     document.body.style.cursor = "pointer"; 
     inLink=true; 
    } 
    else{ 
     document.body.style.cursor = ""; 
     inLink=false; 
    } 
} 

//if the link has been clicked, go to link 
function on_click(e) { 
    if (inLink) { 
    window.location = linkText; 
    } 
} 

draw(); 

Answer 2

无法将超链接添加到单个画布图像，因为这些图像成为单个画布元素的一部分。

解决方案是检测JavaScript中的单击事件，确定光标所在的位置以及它是否在图像上，然后相应地更改页面。

Answer 3

var canvas = document.getElementById("myCanvas"); 
 
var ctx; 
 
var linkText="http://google.com"; 
 
var linkX=5; 
 
var linkY=15; 
 
var linkHeight=10; 
 
var linkWidth; 
 
var inLink = false; 
 

 
// draw the balls on the canvas 
 
function draw(){ 
 
    canvas = document.getElementById("myCanvas"); 
 
    // check if supported 
 
    if(canvas.getContext){ 
 

 
    ctx=canvas.getContext("2d"); 
 

 
    //clear canvas 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 

 
    //draw the link 
 
    ctx.font='10px sans-serif'; 
 
    ctx.fillStyle = "#0000ff"; 
 
    ctx.fillText(linkText,linkX,linkY); 
 
    linkWidth=ctx.measureText(linkText).width; 
 

 
    //add mouse listeners 
 
    canvas.addEventListener("mousemove", on_mousemove, false); 
 
    canvas.addEventListener("click", on_click, false); 
 

 
    } 
 
} 
 

 
//check if the mouse is over the link and change cursor style 
 
function on_mousemove (ev) { 
 
    var x, y; 
 

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

 
    //is the mouse over the link? 
 
    if(x>=linkX && x <= (linkX + linkWidth) && y<=linkY && y>= (linkY-linkHeight)){ 
 
     document.body.style.cursor = "pointer"; 
 
     inLink=true; 
 
    } 
 
    else{ 
 
     document.body.style.cursor = ""; 
 
     inLink=false; 
 
    } 
 
} 
 

 
//if the link has been clicked, go to link 
 
function on_click(e) { 
 
    if (inLink) { 
 
    window.location = linkText; 
 
    } 
 
} 
 

 
draw();

<canvas id="myCanvas" width=500 height=500 style="border:1px solid black"></canvas>

这里是一个工作环节。