js实现canvas粒子三维空间旋转动画效果代码-html代码-BFW代码库

js实现canvas粒子三维空间旋转动画效果代码

代码语言：html

所属分类：粒子

代码描述：js实现canvas粒子三维空间旋转动画效果代码

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

<html>

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

    <style>
        body {
            background-color: #fe4a3a;
        }
    </style>
</head>

<body>
    <script>
        // ///////////////////////////////////////////////////////////
        // Particle
        // ///////////////////////////////////////////////////////////
        var Particle = function(stageConfig, particleConfig) {
            this.stageConfig = stageConfig;
            this.particleConfig = particleConfig;
        };
        
        var pProto = Particle.prototype;
        
        pProto.draw = function() {
            this.stageConfig.context.fillStyle = "#FEF1C4";
            this.stageConfig.context.beginPath();
            this.stageConfig.context.arc(this.particleConfig.x, this.particleConfig.y, this.particleConfig.r, 0, Math.PI * 2, false);
            this.stageConfig.context.fill();
        };
        
        // ///////////////////////////////////////////////////////////
        // ParticlesView
        // ///////////////////////////////////////////////////////////
        var ParticlesView = function() {
            this.init();
        };
        
        var proto = ParticlesView.prototype;
        
        proto.init = function() {
            this
                .setupHandlers()
                .layout()
                .createParticls()
                .render();
        };
        
        proto.setupHandlers = function() {
            this.renderHandler = this.render.bind(this);
        
            return this;
        };
        
        proto.layout = function() {
            var stage = document.createElement('canvas');
            stage.width = window.innerWidth;
            stage.height = window.innerHeight;
            var context = stage.getContext('2d');
            var centerX = stage.width / 2;
            var centerY = stage.height / 2;
        
            this.stageConfig = {
                stage: stage,
                context: context,
                centerX: centerX,
                centerY: centerY
 .........完整代码请登录后点击上方下载按钮下载查看