现在我的代码按照我想要的方式工作，但是当我创建计时器来重绘三 Angular 形时，它每次被调用时都会覆盖一个新的三 Angular 形，因此为了阻止这种情况，我放入了clearRect，但现在它清除了整个 Canvas 否定我所拥有的黑色。我怎样才能添加一个新的计时器，它仍然提供与移动三 Angular 形相同的效果，但不需要clearRect，或者我怎样才能修复我必须让 Canvas 的背景保持黑色但不每次都覆盖新三 Angular 形的问题？如有任何帮助，我们将不胜感激!
编辑:我还尝试了两个不同的计时器，而不是使用handleClick计时器，但是三 Angular 形的速度得到了奇怪的结果，有谁知道这是为什么？:
timer = setInterval(init, 30);
timer = setInterval(Triangle, 30);
代码:
<html>
<head>
<script>
var canvas;
var context;
var triangles = [];
function init() {
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
resizeCanvas();
window.addEventListener('resize', resizeCanvas, false);
window.addEventListener('orientationchange', resizeCanvas, false);
canvas.onclick = function(event) {
handleClick(event.clientX, event.clientY);
};
timer = setInterval(handleClick, 30);
}
function Triangle(x,y,color) {
this.x = x;
this.y = y;
this.color = color;
this.vx = Math.random() * 10 - 5; //5-3
this.vy = Math.random() * 10 - 5;
for (var i=0; i < triangles.length; i++) {
var t = triangles[i];
t.x += t.vx;
t.y += t.vy;
if (t.x + t.vx > canvas.width || t.x + t.vx < 0)
t.vx = -t.vx;
if (t.y + t.vy > canvas.height || t.y + t.vy < 0)
t.vy = -t.vy;
}
}
function handleClick(x,y) {
context.clearRect(0,0, canvas.width,canvas.height);
var colors = ['red','green','purple','blue','yellow'];
var color = colors[Math.floor(Math.random()*colors.length)];
triangles.push(new Triangle(x, y, color));
for(i=0; i < triangles.length; i++) {
drawTriangle(triangles[i]);
}
}
function drawTriangle(triangle) {
context.beginPath();
context.moveTo(triangle.x,triangle.y);
context.lineTo(triangle.x + 50,triangle.y + 50);
context.lineTo(triangle.x + 50,triangle.y - 50);
context.fillStyle = triangle.color;
context.fill();
}
function resizeCanvas() {
canvas.width = window.innerWidth-10;
canvas.height = window.innerHeight-10;
fillBackgroundColor();
for(i=0; i < triangles.length; i++) {
drawTriangle(triangles[i]);
}
}
function fillBackgroundColor() {
context.fillStyle = 'black';
context.fillRect(0,0,canvas.width,canvas.height);
}
window.onload = init;
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500">
</body>
</html>
最佳答案
我花了几分钟阅读了你的代码，发现了一件对我来说很突出的事情。首先，当您调用 timer = setInterval(handleClick, 30); 时，命令会在 handleClick 函数中从上到下运行。因此，当我们查看该函数时，首先绘制的是黑色背景。然后，你推出一个全新的三 Angular 形。接下来，您使用循环绘制数组中的所有三 Angular 形。这就是问题所在。您正在做的是将所有过去的三 Angular 形绘制在刷新的黑色矩形之上。
尝试将您的代码设置为类似这样的内容。
function handleClick(x,y) {
context.clearRect(0,0, canvas.width,canvas.height);
var colors = ['red','green','purple','blue','yellow'];
var color = colors[Math.floor(Math.random()*colors.length)];
triangles.push(new Triangle(x, y, color));
triangles.shift(); //This removes the first point in the array, and then shifts all other data points down one index.
for(i=0; i < triangles.length; i++) {
drawTriangle(triangles[i]);
}
}
如果我错过解释您的任何代码，或者您有后续问题，请告诉我。
关于javascript - 如何清除 Canvas 但保留填充？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40853995/