问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

在 HTML 画布中创建链接

社区维基
1
新手上路，请多包涵

是否可以从画布元素中呈现的文本创建 html 链接？

原文由 Chris 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcanvashyperlink
阅读 308
2 个回答
得票最新
社区维基
1
✓ 已被采纳

没有简单的方法。您必须将链接文本绘制到画布上，然后检查鼠标点击。这是一个演示 html 页面：

 <html>
<head>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var ctx;
var linkText="https://stackoverflow.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;
  }
}
</script>
</head>
<body onload="draw()">
<center>
<canvas id="myCanvas" width="200" height="200" style="border-style:solid;border-width:1px">Canvas not supported.</canvas>
</center>
</body>
</html>

原文由 dogbane 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

此示例显示了如何向 HTML 画布添加多个链接：

 <!DOCTYPE html>

<!-- This page shows how to add multiple links to <canvas> (by Yakovenko Max) -->

<html>
<head>
<title>Canvas Links Example</title>

<script>
    function OnLoad(){
        // Get canvas
        var canvas = document.getElementById("myCanvas");

        // 2d context
        var ctx = canvas.getContext("2d");
        ctx.translate(0.5, 0.5); // * Move the canvas by 0.5px to fix blurring

        // Block border
        ctx.strokeStyle = "#5F7FA2";
        ctx.strokeRect(50, 50, 185, 90);

        // Photo
        var img = new Image();
        img.src = "http://www.cs.washington.edu/education/courses/csep576/05wi/projects/project4/web/artifact/liebling/average_face.gif";
        img.onload = function(){
            ctx.drawImage(img, 59.5, 59.5); // Use -0.5px on photos to prevent blurring caused by * fix
        }

        // Text
        ctx.fillStyle = "#000000";
        ctx.font = "15px Tahoma";
        ctx.textBaseline = "top";
        ctx.fillText("Username", 95, 65);

// ***** Magic starts here *****

        // Links
        var Links = new Array(); // Links information
        var hoverLink = ""; // Href of the link which cursor points at
        ctx.fillStyle = "#0000ff"; // Default blue link color
        ctx.font = "15px Courier New"; // Monospace font for links
        ctx.textBaseline = "top"; // Makes left top point a start point for rendering text

        // Draw the link
        function drawLink(x,y,href,title){
            var linkTitle = title,
                linkX = x,
                linkY = y,
                linkWidth = ctx.measureText(linkTitle).width,
                linkHeight = parseInt(ctx.font); // Get lineheight out of fontsize

            // Draw the link
            ctx.fillText(linkTitle, linkX, linkY);

            // Underline the link (you can delete this block)
            ctx.beginPath();
            ctx.moveTo(linkX, linkY + linkHeight);
            ctx.lineTo(linkX + linkWidth, linkY + linkHeight);
            ctx.lineWidth = 1;
            ctx.strokeStyle = "#0000ff";
            ctx.stroke();

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

            // Add link params to array
            Links.push(x + ";" + y + ";" + linkWidth + ";" + linkHeight + ";" + href);
        }

        // Link hover
        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;
            }

            // Link hover
            for (var i = Links.length - 1; i >= 0; i--) {
                var params = new Array();

                // Get link params back from array
                params = Links[i].split(";");

                var linkX = parseInt(params[0]),
                    linkY = parseInt(params[1]),
                    linkWidth = parseInt(params[2]),
                    linkHeight = parseInt(params[3]),
                    linkHref = params[4];

                // Check if cursor is in the link area
                if (x >= linkX && x <= (linkX + linkWidth) && y >= linkY && y <= (linkY + linkHeight)){
                    document.body.style.cursor = "pointer";
                    hoverLink = linkHref;
                    break;
                }
                else {
                    document.body.style.cursor = "";
                    hoverLink = "";
                }
            };
        }

        // Link click
        function on_click(e) {
            if (hoverLink){
                window.open(hoverLink); // Use this to open in new tab
                //window.location = hoverLink; // Use this to open in current window
            }
        }

        // Ready for use ! You are welcome !
        drawLink(95,93,"http://www.facebook.com/","Me at facebook");
        drawLink(95,110,"http://plus.google.com/","Me at G+");
    }
</script>
</head>
<body onload="OnLoad();">
<canvas id="myCanvas" width="450" height="250" style="border:1px solid #eee;">
Canvas is not supported in your browser ! :(
</canvas>
</body>
</html>

原文由 Yakovenko Max 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题