HTML5动画封装函数

构造函数使用

// el：canvs元素
// injeSpeed：注入速度  1 -> 400	0或者空串是默认值340
// animSpeed：动画速度  1 - 1000	0或者空串是默认值60
// 注入器: 定时向数组注入随机圆的信息
// 循环变化器: 每次执行个体的信息的改变，以及判断是否需要删除个体
// 		删除个体：当个体的某个值满足条件时 清除容器的的第i位
// 注入器 --> 循环变化器 --> 循环变化器 -->循环绘制器
// InjeConts：个体信息
var canvs = document.querySelector('canvas')
new canvaAnim({
	el: canvs,injeSpeed: 340,animSpeed: 60, 						
  // 注入器，将注入个体信息返回
	injection() {return {width: 0,height: 0}},
  // 循环变化器
	changer(InjeCont) {  
		InjeCont.width++
		InjeCont.height++
		// 达成条件返回true，代表删除个体信息
		if(InjeCont.width> 100){return true} 
	},
  // 循环绘制器
	plotter(ctx, InjeCont) { 
		ctx.save();
		// 这里添加样式
		ctx.beginPath();
		// 这里进行绘制规则
		ctx.fillRect(0, 0, InjeCont.width, InjeCont.height) // 创建一个矩形
		ctx.fill()
		ctx.restore();
	}
})

构造函数源码

function canvaAnim(obj) {
	return canvaAnim.prototype.init(obj)
}
canvaAnim.prototype = {
	init: function(obj) {
		this.processor(obj)
	},
	InjeConts: [], // 创建注入容器	
	processor: function(obj) { // 处理器
		var info = obj; // 获取初始化信息
		var $_this = this
		// 定制注入速度
		if (info.injeSpeed) {info.injeSpeed = 400 - info.injeSpeed} else {info.injeSpeed = 60}
		// 定制动画速度
		if (info.animSpeed) {info.animSpeed = 1000 / info.animSpeed} else {info.animSpeed = 1000 / 60}
		// 判断有没有画笔
		if (info.el.getContext) {
			// 创建画笔
			var ctx = info.el.getContext("2d");
			// 注入器
			setInterval(function() {
				$_this.injeProce(this.InjeConts, info.injection())
			}, info.injeSpeed)
			setInterval(function() {
				// 变化器处理函数，传入变化器
				$_this.changerProce(this.InjeConts, info.changer)
				// 绘制器处理函数，传入绘制其
				plotterProce(ctx, this.InjeConts, info.plotter)
			}, info.injeSpeed)
		}
	},
	// 注入数组处理函数
	injeProce: function(InjeConts, InjeCont) {InjeConts.push(InjeCont)},
	// 变化器处理函数
	changerProce: function(InjeConts, changer) {
		for (var i = 0; i < InjeConts.length; i++) {
			// 判断个体状态
			var InjeContStatus = changer(InjeConts[i])
			// 如果为true，代表需要清除该个体
			if (InjeContStatus) {InjeConts.splice(i, 1)}
		}
	},
	// 绘制器处理函数
	plotterProce: function(ctx, InjeConts, plotter) {
		ctx.clearRect(0, 0, oc.width, oc.height);// 每次执行清除画板
		for (var i = 0; i < InjeConts.length; i++) {
			plotter(ctx, InjeConts) // 执行绘制，传入个体信息
		}
	}
}
canvaAnim.prototype.init.prototype = canvaAnim.prototype