我使用 Canvas 元素创建了一个三 Angular 形图像 mask 。我有一个文本字段，当鼠标悬停在上面时，我想将其显示在该三 Angular 形的底线。我无法弄清楚如何仅在悬停时显示文本。
我是这方面的初学者...任何帮助都适用!
这是我目前得到的代码:
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);
}
}
};
最佳答案
这是如何...
当用户的鼠标悬停在 canvas 元素上时，您可以使用以下方法绘制文本:
canvas.addEventListener("mouseover",function(){
draw(ctx,img,"Hello!");
});
当用户的鼠标移出 Canvas 元素时，您可以使用以下方法清除文本:
canvas.addEventListener("mouseout",function(){
draw(ctx,img);
});
请注意，您的绘制函数现在会清除 Canvas 以准备重新绘制:
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();
}
这是代码和 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>
关于javascript - 仅在鼠标悬停时在 Canvas 上显示文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18539492/