Recently with classmates took part in the big wide, is going to make a H5 interactive products, animation and interaction, the first to adopt is to use the canvas to achieve, but they are sensitive to the code is not even object-oriented development, also want to go in the face of a pile of objects and variables, careless slightly, will be an error or a computer CPU surge. So I spent some time making a small canvas solution (shamelessly telling myself it’s a small frame).

advantages

Support component development

Global drawing can be divided up among different components to draw, which also means that a large animation can be divided up among different people to make and then executed directly

	var d={
		name:"apple1",}Copy the code

This creates a layer of components, not surprisingly

Multi-layer execution

Here I separate the data layer, the drawing layer, and the logic layer. I just define it in the data layer, set up what I want to draw, and leave it to the logic layer to do the calculations

Var d={name:"apple1", path:function(){this.x=20; this.v=2; }, draw:function(){this.ctx.fillstyle ="red"; This. CTX. FillRect (enclosing x, 0200200); this.ctx.fill(); }, active:function(){this.x+=this.v; }}Copy the code

This way, we don’t have to worry about variables and other problems, and avoid a lot of drawing headaches

Emulate the DOM hierarchy

	var a=new draw({
		name:"apple2".ctx:ctx,
		path:function(){
			// Define and draw
			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],/ / child objects
		active:function(){// Event animation processing
			this.x+=1; }})Copy the code

The component is passed to the parent component and finally to the head component. Child objects can also be added to a single component

Single component capture

var gg=util.getEle(“ui”); It is easy to capture nodes and manipulate data to facilitate event and value passing within components

Next week, we will return to the update of the tutorial of Avatar Generator, which will update the related technical tutorial of Canvas and SVG irregularly. There will be actual combat type, master principle type, 2D 2.5D 3D, and linear algebra, physical graphics and other related basic knowledge will be involved. Solution portal: Canvas widget framework

Welcome guests to pay attention to the coin collection