canvas背景效果

Posted 2020-10-01 前端站

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas背景效果相关的知识，希望对你有一定的参考价值。

canvas背景效果:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
<canvas id="canvas" width="800" height="800"></canvas>
</body>
<script>
    let canvas = document.getElementById(‘canvas‘);
    let ctx = canvas.getContext(‘2d‘);
    let w = canvas.width = canvas.offsetWidth;
    let h = canvas.height = canvas.offsetHeight;
    let circles = [];

    function rand(min, max) {
        return parseInt(Math.random() * (max - min + 1) + min);
    }

    class Circle {
        constructor() {
            this.r = rand(5, 15);
            let x = rand(0, canvas.width - this.r);
            let y = rand(0, canvas.height - this.r);
            this.x = x < this.r ? this.r : x;
            this.y = y < this.r ? this.r : y;

            let speed = rand(1, 3);
            this.speedX = rand(0, 4) > 2 ? speed : -speed;
            this.speedY = rand(0, 4) > 2 ? speed : -speed;
        }

        drawCircle(ctx) {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.r, 0, 360);
            ctx.closePath();
            ctx.fillStyle = ‘rgba(204,204,204,0.3)‘;
            ctx.fill();
        }

        drawLine(ctx, _circle) {
            let dx = this.x - _circle.x;
            let dy = this.y - _circle.y;
            let d = Math.sqrt(dx * dx + dy * dy);
            if (d < 150) {
                ctx.beginPath();
                ctx.moveTo(this.x, this.y);
                ctx.lineTo(_circle.x, _circle.y);
                ctx.closePath();
                ctx.strokeStyle = ‘rgba(204,204,204,0.3)‘;
                ctx.stroke();
            }
        }

        move(w, h) {
            this.x += this.speedX / 10;
            if (this.x > w || this.x < 0) {
                this.speedX *= -1;
            }

            this.y += this.speedY / 10;
            if (this.y > h || this.y < 0) {
                this.speedY *= -1;
            }
        }
    }

    class curCircle extends Circle {
        constructor() {
            super();
        }

        drawCircle(ctx) {
            ctx.beginPath();
            this.r = 5;
            ctx.arc(this.x, this.y, this.r, 0, 360);
            ctx.closePath();
            ctx.fillStyle = ‘rgba(255,77,54,0.6)‘;
            ctx.fill();
        }
    }

    let circle = new curCircle();
    let draw = function () {
        ctx.clearRect(0, 0, w, h);
        for (let i = 0; i < circles.length; i++) {
            circles[i].drawCircle(ctx);
            for (j = i + 1; j < circles.length; j++) {
                circles[i].drawLine(ctx, circles[j]);
            }
            circles[i].move(w, h);
        }
        if (circle.x) {
            circle.drawCircle(ctx);
            for (let k = 1; k < circles.length; k++) {
                circle.drawLine(ctx, circles[k])
            }
        }
        requestAnimationFrame(draw);
    };

    let init = function (num) {
        for (let i = 0; i < num; i++) {
            circles.push(new Circle());
        }
        draw();
    };

    window.addEventListener(‘load‘, init(20));

    canvas.addEventListener(‘mousemove‘, function (e) {
        e = e || window.event;
        circle.x = e.offsetX;
        circle.y = e.offsetY;
    });

    canvas.addEventListener(‘mouseout‘, function (e) {
        circle.x = null;
        circle.y = null;
    });
</script>

</html>

以上是关于canvas背景效果的主要内容，如果未能解决你的问题，请参考以下文章

html5 canvas首屏自适应背景动画循环效果怎么插入

canvas背景效果

Konva/Canvas 背景模糊/磨砂玻璃效果

自己定义View时，用到Paint Canvas的一些温故，简单的帧动画（动画一，"掏粪男孩Gif"顺便再提提onWindowFocusChanged）(代码片段

一个非常赞的网页背景效果——canvas-nest