Question

我有一个2D画布和无限期地绘制圆圈。

举个例子：http://jsfiddle.net/umaar/fnMvf/

<html>
    <head>
        </head>

<body>
    <canvas id="canvas1" width="500" height="500"></canvas>
</body>
</html>

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

我是否真的需要在某个特定时间间隔清除画布？

在这种情况下画布是如何工作的？因为它是2D＆＃39; 2D＆＃39;上下文，它是否仍然存储以前的数据？如果是的话，应该采用什么方法来实现绘制圆圈保持性能的平滑度？

Answer 1

Canvas是一个绘图表面。绘制元素时（例如，调用填充方法），您只需更改绘图表面上某些像素的颜色。画布不存储有关正在绘制的元素的任何信息。在您的示例中，无需清除画布。

清除HTML5中的画布[2D上下文]是否具有良好的性能？

1 个答案: