js实现canvas彩色粒子球中心弹射曲线运动效果代码-html代码-BFW代码库

js实现canvas彩色粒子球中心弹射曲线运动效果代码

代码语言：html

所属分类：粒子

代码描述：js实现canvas彩色粒子球中心弹射曲线运动效果代码

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

<html>

<head>
    <style>
        * {
          box-sizing: border-box;
        }
        
        html,
        body {
          height: 100%;
          width: 100%;
        }
        
        body {
          margin: 0;
          overflow: hidden;
        }
    </style>

</head>

<body style=""><canvas></canvas>
    <script>
        "use strict";
    function getFullScreenParams(ctx) {
        const { width, height } = ctx.canvas;
        return [0, 0, width, height];
    }
    function getCtxUtils(ctx) {
        function clear() {
            const params = getFullScreenParams(ctx);
            ctx.clearRect(...params);
        }
        function save(callback) {
            ctx.save();
            callback();
            ctx.restore();
        }
        function drawPath(callback) {
            ctx.beginPath();
            callback();
            ctx.closePath();
        }
        return {
            clear,
            save,
            drawPath
        };
    }
    function initCanvas(resizeCallback, parent = document.body) {
        function create() {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            return [canvas, ctx];
        }
        function resize() {
            const { clientHeight, clientWidth } = parent;
            canvas.height = clientHeight;
            canvas.width = clientWidth;
            resizeCallback();
        }
        function append() {
            parent.innerHTML = '';
            parent.appendChild(canvas);
        }
        const [canvas, ctx] = create();
        resize();
        append();
        window.addEventListener('resize', resize);
        return ctx;
    }
    class Curve {
        constructor(origin, angle, length = 400) {
            this.angle = angle;
            this.length = length;
            this._angleOffset = 40;
            this.percentage = 0;
            this.speed = (Math.random() * 0.005) + 0.0005;
            this.randColor = () => {
                const { floor, random } = Math;
                return ['cyan', 'magenta', 'yellow'][floor(random() * 3)];
            };
            this.getEndPoint = () => {
                const { cos, sin } = Math;
                const x = cos(this.angle) * this.length;
                const y = sin(this.angle) * this.length;
                return [x, y];
            };
            this.getStartControlPoint = () => {
                const { cos, sin } = Math;
                const angle = this.angle - (this._angleOffset / 60);
                const length = this.length / 3;
                const x = cos(angle) * length;
                const y = sin(angle) * length;
                return [x, y];
            };
            this.getEndControlPoint = () => {
                const { cos, sin } = Math;
                const angle = this.angle + (this._angleOffset / 60);
                const length = (this.length / 3) * 2;
                const x = cos(angle) * length;
                const y = sin(angle) * length;
                return [x, y];
            };
            this.animate = () => {
                function getXY() {
                    const x = cubicN(percentage, 0, startControlPoint[0], endControlPoint[0], end[0]);
                    const y = cubicN(percentage, 0, startControlPoint[1], endControlPoint[1], end[1]);
                    return [x, y];
                }
                // cubic helper formula
                function cubicN(T, a, b, c, d) {
                    const t2 = T * T;
                    const t3 = t2 * T;
                    return a + (-a * 3 + T * (3 * a - a * T)) * T + (3 * b + T * (-6 * b + b * 3 * T)) * T + (c * 3 - c * 3 * T) * t2 + d * t3;
                }
                const { startControlPoint, endControlPoint, end, percentage } = this;
                if (!this.isComplete) {
                    this.p.........完整代码请登录后点击上方下载按钮下载查看