自制团队开发canvas解决方案

最近跟同学参加了大广赛，准备做一个H5交互的产品，动画与交互，最先打算采用的就是使用canvas来实现，但是她们对代码并不敏感哪怕是面向对象开发，同样也要去面对一堆的对象以及变量，稍有不慎，就会报错或者电脑CPU占用飚升。 于是，我花了一些时间，做了一套canvas的小型解决方案(无耻的告诉自己是小框架)

优点

支持组件式开发

可以将全局的绘制分给不同的组件来绘制，这也将意味，一个大动画，可以分给不同的人来制作，然后可以直接汇总执行

	var d={
		name:"apple1",
	}

这样便可以创建出一个图层的组件，是不是有点意外

多层执行

这里我将数据层，绘制层与逻辑层抽离出来，只需要在数据层里定义好，然后把要绘制的东西设置好，剩下的抛给逻辑层去做计算就可以了

	var d={
		name:"apple1",
		path:function(){//数据定义层
			this.x=20;
			this.v=2;
		},
		draw:function(){//绘制层
			this.ctx.fillStyle="red";
			this.ctx.fillRect(this.x,0,200,200);
			this.ctx.fill();
		},
		active:function(){//逻辑层
			this.x+=this.v;
		}
	}

这样一来，我们就不需要去考虑变量与其他的问题了，避开了大量的绘制困扰

仿DOM层级结构

	var a=new draw({
		name:"apple2",
		ctx:ctx,
		path:function(){
			//定义与绘制
			this.x=10;
			this.y=10;
			this.z=10;
		},
		draw:function(){
		    this.ctx.fillStyle="yellow";
			this.ctx.fillRect(this.x,this.y,200,200);
			this.ctx.fill();			
		},
		child:[d],//子对象
		active:function(){//事件动画处理
			this.x+=1;
		}
	})

把组件抛给父级组件，最后统一交给head组件，单个组件内也可以添加子对象

单组件捕获

var gg=util.getEle("ui");//捕获节点 如此简单便可捕获到其中的节点，并且去操作数据，便可以方便组件内的事件与值传递

在开发的时候，遇到了不少的问题，在处理动画的时候，经常因为对层级处理错误，导致CPU飚升，然后卡死了。 16年寒假的时候，曾想着做一个canvas的框架，结果写了一大堆乱七八糟的，看着自己都烦，这个本来是打算做工具的，写完后感觉挺喜欢的，想把它的功能完善一下，然后开源出去。 欢迎大家提出一些意见，我会把它加入进来的。

下周会恢复到头像生成器那一篇教程的更新 不定期更新canvas与svg的相关技术教程，有实战型，也会有主原理型的，2d 2.5d 3d都会包含到，同时涉及的有 线性代数 物理 图形学等相关的基础知识。 解决方案传送门:canvas小框架

欢迎各位客官收藏关注 投硬币包养