炫酷粒子特效-html代码-BFW代码库

炫酷粒子特效

代码语言：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.points.push(p);
                    this.rotatedPoints.push(p1);
                }
            }

            draw() {
                ctx.save();
                ctx.fillStyle = "rgba(255,255,255,1)";
                ctx.strokeStyle = "rgba(120,0,0,.7)";
                ctx.translate(this.rotatedPos.x, this.rotatedPos.y);
                ctx.beginPath();
                ctx.moveTo(this.rotatedPoints[0].x, this.rotatedPoints[0].y);
                for (let i = 1; i < this.rotatedPoints.length; i++) {
                    ctx.lineTo(this.rotatedPoints[i].x, this.rotatedPoints[i].y);
                }
                ctx.lineTo(this.rotatedPoints[0].x, this.rotatedPoints[0].y);
                ctx.closePath();
                ctx.fill().........完整代码请登录后点击上方下载按钮下载查看