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()
       .........完整代码请登录后点击上方下载按钮下载查看

网友评论0