putImageData并不总是有效
putImageData doesn't always work
本文关键字:有效 putImageData 更新时间:2023-09-26
在画布中恢复背景时遇到问题。我有一个画布,可以根据选项所说的内容改变大小(它可以变得非常大),我在上面画图像,现在我想要一个指示器来显示鼠标以网格状格式的位置。问题是红色框被绘制,但下次更改curX
或curY
时不会重新绘制背景。
我注意到的一个奇怪的部分是,当我将鼠标带到黑色区域时,红色框似乎是深红色,但是当我在同一位置上来回移动时,红色似乎变得更强。有时我之前画的红框也会变得更强,不用再去这些区域,就像一条小径正在形成一样。
只有有时背景会返回,但这通常是在我离开该区域时。
<canvas id="leveldraw" onmousemove="getMouse(event)" onmouseout="stopMouse()" width="0" height="0"></canvas>
。
var oldBlk = null;
...
function getMouse(e)
{
var offsetpos = recursive_offset(canvas);
var oldX = curX;
var oldY = curY;
mouseX = e.clientX + offsetpos.x + (canvas.offsetLeft/2);
mouseY = e.clientY + offsetpos.y + (canvas.offsetTop/2)+24;
curX = Math.floor(mouseX/24);
curY = Math.floor(mouseY/24);
if(oldX!=curX || oldY!=curY)
{
if(oldBlk != null)
ctx.putImageData(oldBlk,(oldX*24)-24,(oldY*24)-24);
oldBlk = ctx.getImageData((curX*24)-24,(curY*24)-24,72,72);
ctx.lineWidth="1";
ctx.strokeStyle="red";
ctx.rect(curX*24,curY*24,24,24);
ctx.stroke();
}
}
function stopMouse()
{
ctx.putImageData(oldBlk,(curX*24)-24,(curY*24)-24);
oldBlk = null;
}
recursive_offset()
:在可滚动的div中获取鼠标位置
我什至在整个画布上尝试了getImageData,但这似乎不起作用。可能它在离开画布时确实恢复了整个背景,但是一旦我返回画布,红色框就会回来。
在进行下一次绘图操作之前,应使用ctx.beginPath()
。调用stroke()
或fill()
不会清除堆栈,下次会再次绘制,从而导致形成轨迹。
相关文章:
- 如何有效地将游戏数据存储在URL查询字符串中
- 如何使用Node.js最有效地解析网页
- jquery代码在Mozilla中有效,但在其他浏览器上无效
- 有效形式-始终只显示1个错误[角度]
- Javascript袖珍参考,第121页:这是怎么回事;猴子补丁”;方法应该有效
- 单击仅在第二次单击后有效
- 什么'是在asp.net MVC中将本地化的resources.resx文件转换为javascript文件的有效
- 为什么自我执行匿名有效
- D3.js生成有效的SVG,但不显示任何内容
- 如何在AngularJS中有效地检查日期是否有效
- 为什么不是'我的函数在解析云代码中工作吗?当我在Angular和Express中测试时,它是有效的
- 滚动在Chrome中有效,但在Firefox或IE中无效
- 有效地获取两个区间之间的随机整数
- Rails将JavaScript对象存储到Model的有效方式
- Javascript XMLHttpRequest——只有第一个POST请求有效
- 使用条件语句,使 jquery fadeIn/fadeOut 仅在视口 >= 480px 时才有效
- 有效负载字节与实际字节不同
- 如何在three.js中有效地使用TraingleStripDrawMode
- 外部链接的Javascript文件赢得't执行,但函数有效
- putImageData并不总是有效