Как нарисовать анимированный спрайт на Canvas?
1 ответ
от
christine ,
3 месяца назад
@ally
Для рисования анимированного спрайта на Canvas вам нужно выполнить следующие шаги:
- Создайте объект Image для спрайта:
1 2 |
var sprite = new Image(); sprite.src = "sprite.png"; |
- Создайте функцию drawSprite, которая будет отображать спрайт на заданных координатах:
1 2 3 |
function drawSprite(x, y) {
ctx.drawImage(sprite, x, y);
}
|
- Определите каждый кадр анимации спрайта в отдельном объекте Image:
1 2 3 4 5 6 7 8 |
var frames = [
{x: 0, y: 0, width: 32, height: 32},
{x: 32, y: 0, width: 32, height: 32},
{x: 64, y: 0, width: 32, height: 32},
{x: 96, y: 0, width: 32, height: 32}
];
var currentFrame = 0;
|
- Создайте функцию animate, которая будет переключать кадры спрайта и вызывать функцию drawSprite:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function animate() {
currentFrame++;
if (currentFrame >= frames.length) {
currentFrame = 0;
}
var frame = frames[currentFrame];
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(sprite, frame.x, frame.y, frame.width, frame.height, 0, 0, frame.width, frame.height);
requestAnimationFrame(animate);
}
animate();
|
Эта функция будет выполняться рекурсивно с помощью requestAnimationFrame и изменять кадры спрайта на каждом кадре. Вы можете изменять скорость анимации, изменяя количество кадров на секунду.
15