jquery实现canvas粒子流变换形状流动动画效果代码-html代码-BFW代码库

jquery实现canvas粒子流变换形状流动动画效果代码

代码语言：html

所属分类：粒子

代码描述：jquery实现canvas粒子流变换形状流动动画效果代码

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

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <style>
        html,body{
            width:100%;height:100%;margin:0;padding:0;background-color:#000000;
            
        }
        .container{
            width:100％;height:100%;margin:0;padding:0;background-color:#000000;
            
        }
    </style>
</head>

<body>
    <div id="jsi-particle-container" class="container"></div>
    <script>
        var RENDERER = {
         PARTICLE_COUNT: 1000,
         PARTICLE_RADIUS: 1,
         MAX_ROTATION_ANGLE: Math.PI / 60,
         TRANSLATION_COUNT: 500,
         init: function(strategy) {
             this.setParameters(strategy);
             this.createParticles();
             this.setupFigure();
             this.reconstructMethod();
             this.bindEvent();
             this.drawFigure();
         },
         setParameters: function(strategy) {
             this.$window = $(window);
             this.$container = $('#jsi-particle-container');
             this.width = this.$container.width();
             this.height = this.$container.height();
             this.$canvas = $('<canvas />').attr({
                 width: this.width,
                 height: this.height
             }).appendTo(this.$container);
             this.context = this.$canvas.get(0).getContext('2d');
             this.center = {
                 x: this.width / 2,
                 y: this.height / 2
             };
             this.rotationX = this.MAX_ROTATION_ANGLE;
             this.rotationY = this.MAX_ROTATION_ANGLE;
             this.strategyIndex = 0;
             this.translationCount = 0;
             this.theta = 0;
             this.strategies = strategy.getStrategies();
             this.particles = [];
         },
         createParticles: function() {
             for (var i = 0; i < this.PARTICLE_COUNT; i++) {
                 this.particles.push(new PARTICLE(this.center));
             }
         },
         reconstructMethod: function() {
             this.setupFigure = this.setupFigure.bind(this);
             this.drawFigure = this.drawFigure.bind(this);
             this.changeAngle = this.changeAngle.bind(this);
         },
         bindEvent: function() {
             this.$container.on('click', this.setupFigure);
             this.$container.on('mousemove', this.changeAngle);
         },
         changeAngle: function(event) {
             var offset = this.$container.offset(),
                 x = event.clientX - offset.left + this.$window.scrollLeft(),
                 y = event.clientY - offset.top + this.$window.scrollTop();
             this.rotationX = (this.center.y - y) / this.center.y * this.MAX_ROTATION_ANGLE;
             this.rotationY = (this.center.x - x) / this.center.x * this.MAX_ROTATION_ANGLE;
         },
         setupFigure: function() {
             for (var i = 0, length = this.particles.length; i < length; i++) {
                 this.particles[i].setAxis(this.strategies[this.strategyIndex]());
             }
             if (++this.strategyIndex == this.strategies.length) {
                 this.strategyIndex = 0;
             }
             this.translationCount = 0;
         },
         dra.........完整代码请登录后点击上方下载按钮下载查看