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元素和上下文，以及只获取一次图像。

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 个答案: