清除画布矩形（但保留背景） [英] Clear Canvas Rect (but keep background)
问题描述
我正在尝试动画一个圆圈，只是水平移动它工作正常。然而，当圆移动，我必须做一个clearRect在那个圆，使它自己在水平方向重画。当我做一个clearRect它也使背景有白框周围，所以有效地它是一个白色的水平线在圆的移动方向。
I'm trying to animate a circle and just moving it horizontally which works fine. However while the circle is moving, I have to do a clearRect over that circle so that it redraws it self in the horizontal direction. When I do a clearRect it also makes the background have white box around so effectively its going to be one white horizontal line in the direction the circle is moving.
- 有没有办法清除没有clearRect的圈子？
- 如果我在clearRect后不得不重新绘制背景，那么当该区域中有10个圆圈移动时，画布会闪烁。
任何其他方法来解决这个问题？
Any other approaches to solving this?
function drawcircle() {
clear();
context.beginPath();
context.arc(X, Y, R, 0, 2*Math.PI, false);
context.moveTo(X,Y);
context.lineWidth = 0.3;
context.strokeStyle = "#999999";
context.stroke();
if (X > 200)
{
clearTimeout(t); //stop
}
else
{
//move in x dir
X += dX;
t = setTimeout(drawcircle, 50);
}
}
function clear() {
context.clearRect(X-R, Y-R, 2*R, 2*R);
}
推荐答案
非保留绘图模式图形API
首先，让我们讨论HTML5 Canvas的工作方式。就像一个现实世界的帆布与快干油画，当你 stroke（）或 fill（）或 drawImage（）到你的画布上，油漆成为画布的一部分。虽然你画了一个圆，看到它，这样，圆的像素完全取代了背景（或在反锯齿的圆的边缘，混合，永远改变它们）。莫奈说，如果你请他把画中的一个人移动一点点到右边？您无法移动圆圈，也无法清除圆圈，因为没有圆圈 ，因此您无法检测圆圈的滑鼠游标。一个2D数组的像素。
Basics: HTML5 Canvas as a Non-Retained Drawing Mode Graphics API
First, let us discuss the manner in which the HTML5 Canvas works. Like a real-world canvas with fast-drying oil paints, when you stroke() or fill() or drawImage() onto your canvas the paint becomes part of the canvas. Although you drew a 'circle' and see it as such, the pixels of the circle completely replaced the background (or in the case of anti-aliasing at the edges of the circle, blended with and forever changed them). What would Monet say if you asked him to 'move' one of the people in a painting a little bit to the right? You can't move the circle, you can't erase the circle, you can't detect a mouseover of the circle…because there is no circle, there is just a single 2D array of pixels.
-
您的背景是完全静态的，通过CSS将其设置为您的
画布元素的背景图像。
如果您不能执行上述操作，那么您可能会在您的画布上显示并覆盖您的内容。以及只是清除整个画布，并重新绘制每一帧。在我的测试中，需要清除和重绘画布的一部分的工作是不值得的，除非重画画布是非常昂贵的。
If you cannot do the above, then you might as well just clear the entire canvas and re-paint it every frame. In my tests, the work needed to clear and redraw just a portion of the canvas is not worth the effort unless redrawing the canvas is very expensive.
例如，测试： http://phrogz.net/tmp/image_move_sprites_canvas.html
在Safari v5中。 0.4如果我清除并重新绘制整个画布一帧每帧，我看到59.4fps和56.8fps如果我使用20 clearRect（）调用和20 drawImage（）调用只重新绘制背景每个框架的脏部分。
For example, see this test: http://phrogz.net/tmp/image_move_sprites_canvas.html
In Safari v5.0.4 I see 59.4fps if I clear and re-draw the entire canvas once per frame, and 56.8fps if I use 20 clearRect() calls and 20 drawImage() calls to re-draw just the dirtied part of the background each frame. In this case it's slower to be clever and keep track of small dirty regions.
另一种方法是使用保留绘图图形系统如SVG或HTML。有了这些，每个元素 是独立维护的。你可以改变物品的位置，它会神奇地移动;它是由浏览器智能地以最有效的方式绘制更新。
As another alternative, use a retained-drawing graphics system like SVG or HTML. With these, each element is maintained independently. You can change the position of the item and it will magically move; it is up to the browser to intelligently draw the update in the most efficient manner possible.
您可以这样做，同时通过创建和分层多个画布在同一个HTML页面（使用CSS绝对定位和z索引）。如此效果测试所示，移动 20 sprites via CSS 的速度明显快于在一个画布上自己做的。
You can do this while retaining the power of custom canvas drawing by creating and layering multiple canvases in the same HTML page (using CSS absolute positioning and z-index). As seen in this performance test, moving 20 sprites via CSS is significantly faster than trying to do it all yourself on a single canvas.
< h2> Flickering？
您写道：
Flickering?
You wrote:
要在clearRect后保持重画背景，当画面上有10个圆圈在该区域移动时，画布会闪烁。
If I have to keep redrawing the background after clearRect the canvas will flicker when theres say 10 circles moving in that area.
从来没有我的经验。你能提供一个小例子显示这个闪烁的问题，你声称会发生（请指定操作系统，浏览器和版本，你体验这一点）？这里是突出的浏览器开发人员的两个评论，注意到Firefox和Safari都不应该显示任何闪烁。
That has never been my experience. Can you provide a small example showing this 'flicker' problem you claim will occur (please specify OS, browser, and version that you experience this on)? Here are two comments by prominent browser developers noting that neither Firefox nor Safari should ever show any flickering.
这篇关于清除画布矩形（但保留背景）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
