HTML5: Canvas. Анимация

Перемещение
Движение вдоль окружности

Под анимацией будем иметь в виду движение объекта из одной точки в другую в единицу времени.

Перемещение

Напишем пример перемещения обруча по экрану.

<canvas id = "canvasCircle" width = "400" height ="125" style = "border:2px solid black; position:absolute;
left:auto; top:auto; z-index: 2">
Ваш браузер не поддерживает HTML5 Canvas
</canvas>

<canvas id = "canvasBackground" width = "400" height ="125" style = "border:2px solid black; position:absolute;
left:auto; top:auto; z-index: 1">
Ваш браузер не поддерживает HTML5 Canvas
</canvas>

<script>
    // холст для фона
    var backGroundCanvas = document.getElementById("canvasBackground");
    var backGroundContext = backGroundCanvas.getContext("2d");
    
    // холст для обруча
    var circleCanvas = document.getElementById("canvasCircle");
    var circleContext = circleCanvas.getContext("2d");
    
    var xPos = 50; 
    var yPos = circleCanvas.height / 2;
    var radius = 40; 
    var endXPos = circleCanvas.width - 75;
    var change = 10; 
    var startAngle = (Math.PI / 180) * 0;
    var interval = 80; 
    var endAngle = (Math.PI / 180) * 360;
    
    // закрасим фон цветом
    backGroundContext.fillStyle = "silver";
    backGroundContext.fillRect(0, 0, backGroundCanvas.width, backGroundCanvas.height);
    // рисуем через заданный интервал
    var intervalID = setInterval(drawCircle, interval);

    // Рисуем обруч
    function drawCircle()
    {
        // очистим холст
        //circleContext.clearRect(0, 0, circleCanvas.width, circleCanvas.height);

        circleContext.strokeStyle = "red";
        circleContext.lineWidth = 4;
        circleContext.shadowOffsetX = 3;
        circleContext.shadowOffsetY = 3;
        circleContext.shadowBlur = 5;
        circleContext.shadowColor = "gray";
        // меняем позицию
        xPos += change;
        // останавливаемся при достижении края
        if(xPos > endXPos) 
        {
            clearInterval(intervalID)
        };
        
        circleContext.beginPath();
        circleContext.arc(xPos, yPos, radius, startAngle, endAngle, true);
        circleContext.stroke();
    }
</script>

В примере использована техника наложения двух холстов друг на друга. Такой подход удобен разделением ресурсов. В качестве фона можно использовать цвет, узор, картинку. А на втором холсте можно реализовать анимацию, не затрагивая первый холст. В примере два холста имеют одинаковые размеры, но это не обязательное условие.

Для движения обруча мы задаём его позицию, а потом вызываем функцию setInterval(), которая перерисовывает объект через заданный промежуток времени. Функция возвращает идентификатор, который пригодится для остановки движения

В коде есть закомментированая строчка:

// circleContext.clearRect(0, 0, circleCanvas.width, circleCanvas.height);

Если убрать комментарий, то при перемещении предыдущее изображение обруча будет стираться. В этом случае мы увидим правильное движение одного обруча, а не множество обручей в процессе движения.

Движение вдоль окружности

Рисуем обруч, поворачиваем холст, снова рисуем обруч. Получилось следующее.

Реклама