仅在鼠标悬停时在画布上显示文本答案

【问题标题】：Display text over Canvas only onmouseover仅在鼠标悬停时在画布上显示文本
【发布时间】：2013-08-31 04:24:58
【问题描述】：

我用 Canvas 元素创建了一个三角形的图像蒙版。我有一个文本字段，当鼠标悬停时，我想在这个三角形的底线显示它。我无法弄清楚如何仅在悬停时才显示文本。

我是这方面的初学者...任何帮助！

这是我目前得到的代码：

HTML 代码：

<body>
    <a href="#"><canvas id="canvas" width=300 height=300></canvas></a>
  </body>

Javascript：

function masks() {

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var img=new Image();
    img.onload=function(){
        draw(ctx,img,"Hello!");
    }
    img.src="canvas01.png";
    function draw(ctx,img,text){
        ctx.beginPath();
        ctx.moveTo(canvas.width / 2, 0);
        ctx.lineTo(canvas.width, canvas.height);            
        ctx.lineTo(0, canvas.height);
        ctx.closePath();                                          
        ctx.clip();                        
        ctx.drawImage(img,0,0);
        if(text){
            ctx.fillStyle = "#f30";
            ctx.fillRect(0,canvas.height-20,canvas.width,20);
            ctx.fillStyle = "black";
            ctx.font="14pt Verdana";
            var textWidth=ctx.measureText(text).width;
            ctx.fillText(text,(canvas.width-textWidth)/2,canvas.height-3); 
        }

    }

};

【问题讨论】：

对于快速简单的文本悬停，您还可以设置画布元素的标题属性。

标签： javascript css html canvas

【解决方案1】：

方法如下...

当用户将鼠标悬停在画布元素上时，您可以使用以下方法绘制文本：

        canvas.addEventListener("mouseover",function(){
            draw(ctx,img,"Hello!");
        });

当用户的鼠标移出画布元素时，您可以使用以下方法清除文本：

        canvas.addEventListener("mouseout",function(){
            draw(ctx,img);
        });

请注意，您的绘图功能现在会清除画布以准备重绘：

    function draw(ctx,img,text){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(canvas.width / 2, 0);
        ctx.lineTo(canvas.width, canvas.height);            
        ctx.lineTo(0, canvas.height);
        ctx.closePath();                                          
        ctx.clip();                        
        ctx.drawImage(img,0,0);
        if(text){
            ctx.fillStyle = "#f30";
            ctx.fillRect(0,canvas.height-20,canvas.width,20);
            ctx.fillStyle = "black";
            ctx.font="14pt Verdana";
            var textWidth=ctx.measureText(text).width;
            ctx.fillText(text,(canvas.width-textWidth)/2,canvas.height-3);
        }
        ctx.restore();
    }

这是代码和小提琴：http://jsfiddle.net/m1erickson/Q4TKC/

<!doctype html>
<html>
<head>
<style>
    body{ background-color: ivory; padding:10px; }
    #canvas{border:1px solid lightgray;}
</style>

<script>
window.onload=function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var img=new Image();
    img.onload=function(){

        canvas.addEventListener("mouseover",function(){
            draw(ctx,img,"Hello!");
        });
        canvas.addEventListener("mouseout",function(){
            draw(ctx,img);
        });

        draw(ctx,img);
    }
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/sky-bg2.jpg";


    function draw(ctx,img,text){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(canvas.width / 2, 0);
        ctx.lineTo(canvas.width, canvas.height);            
        ctx.lineTo(0, canvas.height);
        ctx.closePath();                                          
        ctx.clip();                        
        ctx.drawImage(img,0,0);
        if(text){
            ctx.fillStyle = "#f30";
            ctx.fillRect(0,canvas.height-20,canvas.width,20);
            ctx.fillStyle = "black";
            ctx.font="14pt Verdana";
            var textWidth=ctx.measureText(text).width;
            ctx.fillText(text,(canvas.width-textWidth)/2,canvas.height-3);
        }
        ctx.restore();
    }

};  // end window.onload

</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

【讨论】：

啊，我明白了！现在我知道 addEventListener 了！再次感谢：）如果我想在弹出字段上具有过渡效果，可以吗？ @markE
我还看到三角形的边缘现在有点像素化，这是以前没有的。不是什么大问题，但你知道为什么吗？
是的，正如 Ken 所说，像素化是由于剪辑造成的。另外，参考您之前关于同一主题的问题...以下是如何将多个画布与可悬停的三角形连接起来：jsfiddle.net/m1erickson/jrTs2
感谢大家的帮助！！！我一直在尝试连接不同的图片而不是 3 张相同的图片，但也没有让它发挥作用。以为我会在“//加载图像部分...”中更改一些内容。并且还尝试在弹出字段上制作过渡效果，使其显示更平滑。 @markE
这里是一个指向 Fiddle 的链接，它展示了如何预加载您的多个图像以及如何在您的文本标签上应用淡入“过渡”效果：jsfiddle.net/m1erickson/6UKxL