Javascript/HTML5 - 更改鼠标事件的文本答案

【问题标题】：Javascript/HTML5 - Changing text on mouse eventJavascript/HTML5 - 更改鼠标事件的文本
【发布时间】：2015-01-28 19:13:53
【问题描述】：

我正在尝试创建一个显示文本的 HTML5 画布，鼠标悬停将删除该文本并显示不同的文本。

这适用于更改颜色 - 基本上只是在当前画布上创建一个新画布。

但是，鼠标悬停会显示新文本，但保留之前的文本。

http://jsfiddle.net/3j2b2egb/

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

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

试试这个。我在绘制之前已经清除了画布。

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

}

这是工作演示http://jsfiddle.net/3j2b2egb/1/

【讨论】：