如何在画布中添加图像链接

Question

<!DOCTYPE html>
<html>
<body>
<p>Image to use:</p>
<img id="scream" src="http://www.w3schools.com/html/img_the_scream.jpg" alt="The Scream" width="220" height="277">
<img id="scream1" src="http://maps.google.com/mapfiles/ms/icons/blue.png" alt="The Scream" width="50" height="20">
<p>Canvas to fill:</p>
<canvas id="myCanvas" width="250" height="300"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<p><button onclick="myCanvas()">Try it</button></p>

<script>
function myCanvas() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("scream");
    ctx.drawImage(img,10,10);

 var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("scream1");
    ctx.drawImage(img,50,80);

var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("scream1");
    ctx.drawImage(img,150,150);

var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("scream1");
    ctx.drawImage(img,180,120);
}
</script>
</body>
</html>

如何在画布中添加图像链接。 如何在加载到画布的地图标记图像中添加导航？ 是否可以为图像添加标签并获得工具提示？

Answer 1

canvas是单个元素，因此不支持工具提示或单独的元素视图-对于canvas，所有内容都只是一个像素。 因此，您可以通过在画布周围创建自己的包装器并使用一些内置方法来跟踪鼠标事件，以查看鼠标悬停在图像的哪一部分，仅此而已。

现在，您的脚本首先要一遍又一遍地执行相同的操作，您只需要获取一次canvas元素和上下文，以及仅获取一次图像即可。

function myCanvas() {

    var canvas, context, image1, image2;

    image1 = document.getElementById("scream");
    image2 = document.getElementById("scream1");

    canvas = document.getElementById("myCanvas");
    context = canvas.getContext("2d");

    context.drawImage(image1,10,10);
    context.drawImage(image2,50,80);
    context.drawImage(image2,150,150);
    context.drawImage(image1,180,120);
}

现在，要检测鼠标悬停的位置，您需要检测图像的大小，然后检查鼠标是否悬停在区域内。 我将仅对一张图像进行处理，但是您的主旨是。 该代码需要进行优化以允许任意数量的图像，但是现在它可以工作：

function addEventListenersToCanvas(){
    var canvas = document.getElementById("myCanvas");
    canvas.addEventListener('mousemove', function(event){
        var image = document.getElementById("myCanvas");
        if(
            event.clientX > 10 && event.clientX < 10 + image.width &&
            event.clientY > 10 && event.clientY < 10 + image.height
        ){
            console.log('hovering on image 1');
        }
    });
}

现在要对此进行优化，我实际上将自己检测图像并自动添加代码。 该组合看起来像下面的代码，但请记住，我必须进行很多调整才能考虑您的可变展示位置。 现在，您将不得不在每帧重新绘制画布以显示悬停的效果，这会使您的代码更加复杂。 老实说，似乎DOM比使用canvas更好。

 var images = []; function myCanvas() { var canvas, context, image1, image2; image1 = document.getElementById("scream"); image2 = document.getElementById("scream1"); canvas = document.getElementById("myCanvas"); context = canvas.getContext("2d"); context.drawImage(image1,10,10); // We oush every image to an array because otherwise // we wont be able to save the x and y values you set here, // and our event for loop would not work. images.push({x:10,y:10,img:image1}); context.drawImage(image2,50,80); images.push({x:50,y:80,img:image2}); context.drawImage(image1,150,150); images.push({x:150,y:150,img:image1}); context.drawImage(image2,180,120); images.push({x:180,y:120,img:image2}); } function addEventListenersToCanvas(canvas){ var canvas = canvas || document.getElementById("myCanvas"); canvas.addEventListener('mousemove', function(event){ for(var i = 0; i < images.length; i++){ if( event.clientX > images[i].x && event.clientX < images[i].x + images[i].img.width && event.clientY > images[i].y && event.clientY < images[i].y + images[i].img.height ){ console.log('hovering on: ' + images[i].img.getAttribute('id')); } } }); } myCanvas(); addEventListenersToCanvas();

 <p>Image to use:</p> <img id="scream" src="http://www.w3schools.com/html/img_the_scream.jpg" alt="The Scream" width="220" height="277"> <img id="scream1" src="http://maps.google.com/mapfiles/ms/icons/blue.png" alt="The Scream" width="50" height="20"> <p>Canvas to fill:</p> <canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>

如何在画布中添加图像链接

问题描述

1 个解决方案

解决方案1
0 2015-09-15 11:44:24

如何在画布中添加图像链接

问题描述

1 个解决方案

解决方案1 0 2015-09-15 11:44:24

解决方案1
0 2015-09-15 11:44:24