只在onmouseover上显示文本 [英] Display text over Canvas only onmouseover
问题描述
我使用Canvas元素创建了一个三角形图像蒙版。我有一个文本字段，我想显示在这个三角形的底线，当鼠标在。我不知道如何使文本显示只有悬停时。
I have created a triangle shaped image mask with the Canvas element. I have a field of text which I want to display at the bottom line of this triangle when mouse over. I can´t figure out how to make the text display only when hovering.
我是这个初学者...任何帮助都可以帮助！
I am a beginner at this... Any help appriciated!
这是我得到的代码far：
This is the code I got so far:
HTML代码：
<body>
<a href="#"><canvas id="canvas" width=300 height=300></canvas></a>
</body>
Javascript：
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元素上时，可以使用以下形式绘制文本：
You can draw your text when the user's mouse is over the canvas element using:
canvas.addEventListener("mouseover",function(){
draw(ctx,img,"Hello!");
});
当用户的鼠标移动到canvas元素之外时，可以使用以下命令清除文本：
You can clear the text when the user's mouse has moved outside the canvas element using:
canvas.addEventListener("mouseout",function(){
draw(ctx,img);
});
请注意，您的绘制函数现在会清除画布以准备重绘：
Note that your draw function now clears the canvas in preparation for redrawing:
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/
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>
这篇关于只在onmouseover上显示文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
