HTML5 with Kingdz Learn the various effects of canvas

First see the topic of how we react ah, wow, so many ah, but after reading this lesson, you will find that these features are just that.

1 "Mobile translate (x, y)

A simple explanation, the X-Y offset of the upper and lower offset

In plain words, that is, if the original coordinates are (0,0) then the translate (100,100) is used, the coordinates go to the point (100,100).

Then, first of all, I'll write a "king" Haha, my surname .

Ha ha.

As you can see, this is the point at which the coordinates are (0,0). Now we'll find a way to change him.

function Draw () {            var c = document.getElementById (' MyCanvas ');            var cxt = C.getcontext ("2d");            Cxt.save ();                Cxt.translate (0);            Cxt.moveto (0, 0);            Cxt.lineto (0);            Cxt.moveto (0);            Cxt.lineto (+);            Cxt.restore ();            Cxt.moveto (0, +);            Cxt.lineto (a);            Cxt.moveto (0, +);            Cxt.lineto (a);            Cxt.linewidth = 2;            Cxt.stroke ();        }

Did you see it? We have a sentence above cxt.translate (90,0);

This is where we moved his origin to see the effect.

There's been a move. Oh. Guys, look at the two methods I commented out above.

Cxt.save ();

Cxt.restore ();

Then, you can open the gaze, look at the effect, oh, God horse effect, self-opened to know, I do not explain in this, although they are very common, but, we have to slowly realize it.

2 "Rotary rotating

Rotate (angle)

This method accepts only one parameter: the angle of rotation (angle), which is the clockwise direction, in radians. "How to calculate radian, hehe, look at the front of the tutorial"

We do it out of this effect.

function Draw () {            var c = document.getElementById (' MyCanvas ');            var cxt = C.getcontext ("2d");            Cxt.translate (+);            for (i = 1; i < 7; i++) {                cxt.save ();   Remember                the status Cxt.fillstyle = ' rgb (' + (+ * i) + ', ' + (200-60 * i) + ', ') ';  Fill random color for                (j = 0; J < i * 6; j + +) {                    cxt.rotate (Math.PI * 2/(I * 6));    Rotation angle                    cxt.beginpath ();                    Cxt.arc (0, I * 12.5, 5, 0, Math.PI * 2, true);                    Cxt.fill ();                }                Cxt.restore ();  Restore Status            }        }

The above example bites a little bit more complex, and below we implement a relatively simple example I believe you can see that this rotate how to use

function Draw () {            var c = document.getElementById ("MyCanvas");            var ctx = C.getcontext ("2d");            var rectwidth =;            var rectheight =;            Ctx.translate (C.WIDTH/2, C.HEIGHT/2);            Ctx.rotate (Math.PI * 2/6);            Ctx.fillstyle = "Red";            Ctx.fillrect (-RECTWIDTH/2,-RECTHEIGHT/2, Rectwidth, rectheight);        }

This should be a good understanding, ctx.rotate (Math.PI * 2/6); The focus is on this point of view.

3 Scaling Scaling

scale(x, y)

scale Method accepts two parameters. X, y are the scaling factors for the horizontal and vertical axes, each of which must be positive. The value is smaller than 1.0, and is larger than 1.0, which means no effect when the value is 1.0.

function Draw () {            var c = document.getElementById ("MyCanvas");            var ctx = C.getcontext ("2d");            var rectwidth =;            var rectheight =;            Ctx.translate (C.WIDTH/2, C.HEIGHT/2);            Ctx.scale (0.5, 0.5);            Ctx.fillstyle = "Red";            Ctx.fillrect (-RECTWIDTH/2,-RECTHEIGHT/2, Rectwidth, rectheight);        }

In fact, this narrowing is similar to the one above the move. Only one is the position, one is the shape.

HTML5 with Kingdz Learn the various effects of canvas