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

jquery实现canvas粒子磁场流变形动画效果代码

代码语言：html

所属分类：粒子

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

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>

<style>
html,body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.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].set.........完整代码请登录后点击上方下载按钮下载查看