在HTML5中清除canvas [2D上下文]是否需要良好的性能？ [英] Is clearing canvas [ 2D Context ] in HTML5 necessary for good performance?
问题描述
我有一个2D画布和绘图圆无限期地一个在另一个之上。
I have a 2D canvas and drawing circle indefinitely one above the other.
以这个例子： http://jsfiddle.net/ umaar / fnMvf /
<html>
<head>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
</body>
</html>
JavaScript：
JavaScript :
var currentEndAngle = 0
var currentStartAngle = 0;
var currentColor = 'black';
var lineRadius = 75;
var lineWidth = 15;
setInterval(draw, 50);
function draw() {
var can = document.getElementById('canvas1'); // GET LE CANVAS
var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius;
var width;
var startAngle = currentStartAngle * Math.PI;
var endAngle = (currentEndAngle) * Math.PI;
currentStartAngle = currentEndAngle - 0.01;
currentEndAngle = currentEndAngle + 0.01;
if (Math.floor(currentStartAngle / 2) % 2) {
currentColor = "white";
radius = lineRadius - 1;
width = lineWidth + 3;
} else {
currentColor = "black";
radius = lineRadius;
width = lineWidth;
}
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = width;
context.lineCap = "round";
// line color
context.strokeStyle = currentColor;
context.stroke();
}
我真的需要以一定的间隔清除画布吗？
Do I really need to clear canvas at some specific interval ?
在这种情况下，canvas如何工作？因为它是2D上下文，它仍然存储以前的数据？如果是的话，应该采取什么方法来实现绘图圈保持性能的平滑？
How does canvas work in that case ? As it is '2D' context, does it still store previous data ? If yes, What should be approach to achieve smoothness for drawing circle keeping performance in mind ?
推荐答案
Canvas是一个绘图表面。当你绘制一个元素（例如调用fill方法），你只是改变一些像素在绘图表面的颜色。画布不存储有关正在绘制的元素的任何信息。在您的示例中，不需要清除画布。
Canvas is a drawing surface. When you draw an element (e.g. call fill method), you are just changing the color of some pixels on the drawing surface. The canvas does not store any information about the element being drawn. In your example, there is no need to clear the canvas.
这篇关于在HTML5中清除canvas [2D上下文]是否需要良好的性能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
