Javascript/HTML5 - 更改鼠标事件上的文本
Javascript/HTML5 - Changing text on mouse event
我正在尝试创建一个显示文本的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);
}
试试这个。我在绘制之前已经清除了画布。
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/
相关文章:
- 兰吉 |如何在 span 标签上使用单击事件删除突出显示的文本
- 是否<asp:文本框>有一个onFocusLost事件
- 手柄'img'单击事件并插入'alt'使用jQuery将属性转换为文本框
- IE8更改文本区域上的事件侦听器不工作
- 在文本区域禁用javascript定义的keydown事件并恢复默认行为
- 替代输入:基于按钮点击事件的文本更改处理程序
- 使用Javascript代码在文本框上激发退格事件
- 我能从“;输入“;事件是否有更好的方法来跟踪文本更改
- 我可以使用jqgrid的oncellselect事件根据单元格内容将文本颜色更改为蓝色吗
- 我需要使用kineticjs点击事件以任何所需的角度旋转画布中的文本
- EventSource 的响应具有非“文本/事件流”的 MIME 类型(“文本/纯文本”)
- 如何将值从文本框传递到自身事件
- angularjs 使用什么事件从文本输入中获取值
- 如何在按键事件发生后获取文本光标的位置
- 如何使asp文本框的按键事件
- 在onkeyup事件中未检测到文本区域更改
- 将指针事件限制为SVG文本填充
- 在单击事件上从所有类获取文本
- 为什么从子窗口调用时父窗口的 OnChange 事件文本框不起作用
- 不带Jquery的Dom事件文本区域更改