僅在onmouseover上顯示Canvas上的文本

Question

我用Canvas元素創建了一個三角形圖像蒙版。 我有一個文本字段，我想在鼠標懸停時顯示在此三角形的底線。 我不知道如何只在懸停時顯示文本。

我是這方面的初學者...任何幫助appriciated！

這是我到目前為止的代碼：

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); 
        }

    }

};

Answer 1

這是如何做...

當用戶的鼠標位於canvas元素上時，您可以使用以下方法繪制文本：

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

當用戶的鼠標移動到canvas元素之外時，您可以使用以下方法清除文本：

        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>

僅在onmouseover上顯示Canvas上的文本

問題描述

1 個解決方案

解決方案1
3 已采納 2013-08-30 19:15:31

僅在onmouseover上顯示Canvas上的文本

問題描述

1 個解決方案

解決方案1 3 已采納 2013-08-30 19:15:31

解決方案1
3 已采納 2013-08-30 19:15:31