我有一个 2D Canvas 和一个无限循环的绘图圆。
举个例子: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();
}
我真的需要在某个特定的时间间隔清除 Canvas 吗？
在这种情况下 Canvas 如何工作？由于它是“2D”上下文，它是否仍然存储以前的数据？如果是，应该采取什么方法来实现绘制圆的平滑度并考虑到性能？
最佳答案
Canvas 是一个绘图表面。当您绘制一个元素(例如调用 fill 方法)时，您只是更改绘图表面上某些像素的颜色。 Canvas 不存储有关正在绘制的元素的任何信息。在您的示例中，无需清除 Canvas 。
关于javascript - 为了获得良好的性能，是否需要在 HTML5 中清除 Canvas [ 2D Context ]？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33743699/