В setInterval не работает ctx.clearRect
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ball = {
x: 150,
y: 400
}
ball.draw = function() {
ctx.arc(ball.x, ball.y, 10, Math.PI * 2, false);
ctx.stroke();
ctx.fill();
}
ball.move = function() {
ball.y -= 2
}
ball.checkInterval = function() {
if (ball.y < 150) {
clearInterval(animation);
}
}
var animation = setInterval(function() {
ctx.clearRect(0, 0, 300, 400);
ball.checkInterval();
ball.draw();
ball.move();
ctx.strokeRect(0, 0, 300, 400)
}, 30)
<canvas id="canvas" width="300" height="400"></canvas>
Ответы (1 шт):
Автор решения: entithat
→ Ссылка
Добавил ctx.beginPath(). Как уже сказали, этот метод начинает новый или сбрасывает текущий путь.
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ball = {
x: 150,
y: 400
}
ball.draw = function() {
ctx.beginPath();
ctx.arc(ball.x, ball.y, 10, Math.PI * 2, false);
ctx.stroke();
ctx.fill();
}
ball.move = function() {
ball.y -= 2
}
ball.checkInterval = function() {
if (ball.y < 150) {
clearInterval(animation);
}
}
var animation = setInterval(function() {
ctx.clearRect(0, 0, 300, 400);
ball.checkInterval();
ball.draw();
ball.move();
ctx.strokeRect(0, 0, 300, 400)
}, 30)
<canvas id="canvas" width="300" height="400"></canvas>