僅在畫布上顯示文字onmouseover

我用Canvas元素創建了一個三角形圖像遮罩。當鼠標懸停時，我想在這個三角形的底部顯示一段文字。我不知道如何僅在懸停時才顯示文字。僅在畫布上顯示文字onmouseover

我是初學者...任何幫助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); 
     } 

    } 

};

來源

2013-08-30 Lisa

對於快速簡單的文本懸停，您可能還會設置畫布元素標題屬性。 –

下面是如何...

可以繪製文本當用戶的鼠標在畫布元素上時使用：

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

Here is code and a fiddle：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>

來源

2013-08-30 19:15:31 markE

啊，我明白了！現在我知道了addEventListener！再次感謝:)如果我想在彈出字段上有過渡效果，那有可能嗎？ @markE – Lisa

此外，我看到三角形的邊緣現在有點像素，這是以前沒有。不是一個大問題，但你知道爲什麼嗎？ – Lisa

是的，正如Ken所說，像素化是由於裁剪。另外，關於這個問題，請參閱您以前的問題...以下是如何連接多個畫布的可靠三角形：http://jsfiddle.net/m1erickson/jrTs2/ – markE

僅在畫布上顯示文字onmouseover

回答

相關問題