炫酷粒子特效

代码语言:html

所属分类:粒子

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>

    <style>
        body {
            overflow: hidden()
        }
        canvas {
            background: rgba(100,0,0,1)
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

    <script type="text/javascript">
        let cw = (canvas.width = window.innerWidth),
        cx = cw / 2;
        let ch = (canvas.height = window.innerHeight),
        cy = ch / 2;
        const ctx = canvas.getContext("2d");
        let rid = null;
        let gap = 40;
        let r = 35;
        let rects = [];

        class Rect {
            constructor(pos, o) {
                this.pos = pos;
                this.rotatedPos = {
                    x: pos.x, y: pos.y
                };
                this.r = r;
                this.points = [];
                this.rotatedPoints = [];

                this.rotOffset = o;
                this.getPoints();
            }

            getPoints() {
                for (let i = 0; i < 4; i++) {
                    let angle = Math.PI / 4 + i * Math.PI / 2;
                    let x = this.r * Math.cos(angle);
                    let y = this.r * Math.sin(angle);
                    let p = {
                        x, y
                    };
                    let p1 = {
                        x, y
                    };
                    this.........完整代码请登录后点击上方下载按钮下载查看

网友评论0