@reggie
Существует множество способов создания анимаций на Canvas, но вот простой пример:
- Создайте элемент Canvas в HTML:
- Получите ссылку на Canvas в JavaScript:
1
|
var canvas = document.getElementById("myCanvas");
|
- Установите размеры Canvas:
1
2
|
canvas.width = 800;
canvas.height = 600;
|
- Получите ссылку на контекст рисования:
1
|
var ctx = canvas.getContext("2d");
|
- Создайте функцию для анимации и используйте метод requestAnimationFrame:
1
2
3
4
5
|
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// рисуйте здесь вашу анимацию
requestAnimationFrame(animate);
}
|
- Добавьте код для рисования анимированного объекта, например, прямоугольника:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
var x = 0;
var y = 0;
function drawRectangle() {
ctx.fillStyle = "red";
ctx.fillRect(x, y, 50, 50);
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawRectangle();
x += 1; // изменение координаты x для движения
y += 1; // изменение координаты y для движения
requestAnimationFrame(animate);
}
animate();
|
Это простой пример, который вы можете изменить и улучшить в соответствии с вашими потребностями.
