Game Development Reference
In-Depth Information
ctx.fillRect(0,0,250,100)
ctx.save();//Saves the state
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="black";
ctx.fillRect(0,0,250,100);
ctx.restore();// restores the state
The transformation matrix of a 2D object is denoted by a 3 x 3 matrix, which is
shown as follows:
Scale Horizontally (a)
Skew Horizontally (b)
0
Skew Vertically (c)
Scale Vertically (d)
0
Moves Horizontally (e)
Moves Vertically (f)
1
The preceding matrix describes the parameters of the transform() function call.
Also, the canvas 2D object is a state machine. The next transform() function call
will act upon the previous transformation. Hence, we use the ctx.save() function
to store the current state and make our transform call and then invoke the ctx.
restore() function to revert to the previous state. The store function call does not
just store the transformations but also other state values such as the fill color.
For further understanding of the 2D context, refer to http://www.whatwg.org/specs/
web-apps/current-work/multipage/the-canvas-element.html#2dcontext .
Using canvas 2D for textures
Canvas 2D can be used for many 2D HTML games. If a canvas 2D object is not a part
of the WebGL specification, then why are we discussing it?
This is because a canvas 2D object can be directly passed as a texture to the WebGL
texture API call. In the following code, if you notice in the gl.texImage2D WebGL
API call, we pass the canvas object as the image data parameter ( document.getElem
entById("canvasElement") ):
<html>
<canvas id="canvasElement"></canvas>
</html>
var texture=this.gl.createTexture();
this.gl.bindTexture(this.gl.TEXTURE_2D, texture);
this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA,
this.gl.RGBA, this.gl.UNSIGNED_BYTE,document.getElementById("canvas
Element"));
this.gl.generateMipmap(this.gl.TEXTURE_2D);
this.gl.texParameteri(this.gl.TEXTURE_2D,
this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
 
Search WWH ::




Custom Search