如何在画布元素中添加超链接到图像？答案

【问题标题】：How to add hyperlink to image in canvas element?如何在画布元素中添加超链接到图像？
【发布时间】：2013-08-03 17:53:54
【问题描述】：

我正在向 HTML5 画布元素动态添加多个图像。我想超链接这些图像。我尝试了不同的方法，但它对我不起作用。有人知道怎么做吗？

【问题讨论】：

请包含您尝试使用的代码。

标签： html image canvas hyperlink

【解决方案1】：

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

解决方案是在 JavaScript 中检测点击事件，确定光标在哪里以及是否在图像上，然后相应地更改页面。

【讨论】：

所以我们必须找出图像的坐标，然后我们需要根据坐标位置设置超链接。

【解决方案2】：

我让它工作了。这是[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();

【讨论】：

没有找到演示。断开的链接。如果可能，请更正。
效果很好！感谢您提供此解决方案。
很高兴看到工作演示。我通过在图像顶部嵌入颜色编码的引脚来采取不同的方法。引脚所代表的链接类型决定了引脚头的颜色。通过 JQuery 将图钉拖到图像上，并在数据库中实时记录图钉的位置以及图钉的超链接和类型。加载图像时，我根据它们的类型将图钉放置在画布层上具有该数据库中记录的位置的图像。

【解决方案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();

&lt;canvas id="myCanvas" width=500 height=500 style="border:1px solid black"&gt;&lt;/canvas&gt;

这是一个有效的链接。

【讨论】：

欢迎来到 SO 并感谢您发布答案。请考虑在您的答案代码中添加上下文。