我用Canvas元素创建了一个三角形图像蒙版。我有一个文本字段,我想在鼠标悬停时显示在此三角形的底线。我不知道如何只在悬停时显示文本。
我是这方面的初学者...任何有用的帮助!
这是我到目前为止的代码:
HTML code:
<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);
}
}
};
答案 0 :(得分:3)
以下是......
当用户的鼠标位于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>