html - キャンバス要素の画像にハイパーリンクを追加するには?

Question

HTML5 キャンバス要素に複数の画像を動的に追加しています。それらの画像をハイパーリンクしたい。さまざまな方法を試しましたが、うまくいきません。誰もそれを行う方法を知っていますか?

Answer 1

個々のキャンバス イメージにハイパーリンクを追加することはできません。これらのイメージは単一のキャンバス要素の一部になるためです。

解決策は、JavaScript でクリック イベントを検出し、カーソルがどこにあり、画像上にあるかどうかを判断し、それに応じてページを変更することです。

Answer 2

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>

ここに作業リンクがあります。