如何將超鏈接添加到畫布元素中的圖像？

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>

這裏是一個工作環節。