我正在尝试创建一个显示文本的HTML5画布,onmouseover将删除该文本并显示不同的文本。
这适用于更改颜色 - 基本上只是在当前颜色上创建一个新画布。
但是,onmouseover显示新文本,但前一个文本仍然存在。
HTML:
<body onload="changeBack()">
<canvas id="test"
width="330"
height="200"
style="border:1px solid #787878;"
onmouseover="change()"
onmouseout="changeBack()">
</canvas>
使用Javascript:
function changeBack() {
var c = document.getElementById("test");
var ctx = c.getContext("2d");
ctx.fillStyle = "blue";
ctx.font = "bold 16px Arial";
ctx.fillText("hello", 100, 100);
}
function change() {
var c = document.getElementById("test");
var ctx = c.getContext("2d");
ctx.fillStyle = "blue";
ctx.font = "bold 16px Arial";
ctx.fillText("world", 100, 100);
}
答案 0 :(得分:0)
试试这个。在绘制它之前我已经清除了画布。
function changeBack() {
var c = document.getElementById("test");
var ctx = c.getContext("2d");
ctx.clearRect ( 0 , 0 , c.width, c.height );
ctx.fillStyle = "blue";
ctx.font = "bold 16px Arial";
ctx.fillText("hello", 100, 100);
}
function change() {
var c = document.getElementById("test");
var ctx = c.getContext("2d");
ctx.clearRect ( 0 , 0 , c.width, c.height );
ctx.fillStyle = "red";
ctx.font = "bold 16px Arial";
ctx.fillText("world", 100, 100);
}