Можете подсказать, как найти анимацию на холсте с использованием технологии canvas?

Question

Owen

html , canvas

Можете подсказать, как найти анимацию на холсте с использованием технологии canvas?

2 сентября 2023 г. 13:46

Ответы на вопрос 1

Похожие вопросы

Answer 1

Если вы хотите найти программное решение для создания анимации на холсте с использованием технологии canvas, я могу поделиться с вами простым примером на языке JavaScript.

Вот пример кода, который создает анимацию фона, где точки летят в разные стороны от центра и реагируют на движение курсора:

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>

    <script>
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

        var mouse = {
            x: undefined,
            y: undefined
        };

        window.addEventListener("mousemove", function(event) {
            mouse.x = event.x;
            mouse.y = event.y;
        });

        function Circle(x, y, dx, dy, radius) {
            this.x = x;
            this.y = y;
            this.dx = dx;
            this.dy = dy;
            this.radius = radius;

            this.draw = function() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, false);
                ctx.strokeStyle = "#000";
                ctx.stroke();
                ctx.fillStyle = "#000";
                ctx.fill();
            };

            this.update = function() {
                if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
                    this.dx = -this.dx;
                }

                if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {
                    this.dy = -this.dy;
                }

                this.x += this.dx;
                this.y += this.dy;

                // Реакция на движение курсора
                if (mouse.x - this.x < 50 && mouse.x - this.x > -50 &&
                    mouse.y - this.y < 50 && mouse.y - this.y > -50) {
                    if (this.radius < 40) {
                        this.radius += 1;
                    }
                } else if (this.radius > 2) {
                    this.radius -= 1;
                }

                this.draw();
            };
        }

        var circles = [];
        for (var i = 0; i < 100; i++) {
            var radius = Math.random() * 3 + 1;
            var x = Math.random() * (canvas.width - radius * 2) + radius;
            var y = Math.random() * (canvas.height - radius * 2) + radius;
            var dx = (Math.random() - 0.5) * 2;
            var dy = (Math.random() - 0.5) * 2;

            circles.push(new Circle(x, y, dx, dy, radius));
        }

        function animate() {
            requestAnimationFrame(animate);
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            for (var i = 0; i < circles.length; i++) {
                circles[i].update();
            }
        }

        animate();
    </script>
</body>
</html>
```

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

Надеюсь, это поможет вам создать анимацию на холсте с использованием технологии canvas!