# HTML5 with Kingdz Learn the various effects of canvas

Source: Internet
Author: User

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

Related Keywords:

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

## A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

• #### Sales Support

1 on 1 presale consultation

• #### After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

• Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.