캔버스 요소의 이미지에 하이퍼 링크를 추가하는 방법은 무엇입니까?

Question

HTML5 캔버스 요소에 여러 이미지를 동적으로 추가하고 있습니다. 나는 그 이미지들을 하이퍼 링크하고 싶다. 나는 다른 방법을 시도했지만 그것은 나를 위해 작동하지 않습니다. 아무도 그것을하는 방법을 알고 있습니까?

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>

하는 작업 링크입니다.