Beginner canvas-Draw Basic graphics

First, use jquery to access the canvas elements in the DOM

var canvas = $ ("#myCanvas"); var context = Canvas.get (0). GetContext ("2d");

One draw a rectangle

Context.fillrect (X,y,width,height);

or for

Context.strokerect (X,y,width,height);

X, y is the horizontal ordinate that draws the starting point

FillRect draws a fill-color rectangle (the default black), and Strokerect draws a rectangle with a border and no padding.

Two draw lines

Context.beginpath ();  Start path Context.moveto (x, y);  Starting point Context.lineto (x, y);  End Context.closepath ();   End Path Context.stroke (); Drawing path Outlines

Three Draw round

Context.beginpath (); Context.arc (x,y,radius,startangle,endangle,anticlockwise); Context.closepath (); Context.fill ();

It means: Starting from a position with a radius from the origin and an angle of the starting angle, the end point falls at a position where the distance from the origin is one radius and the angle is the end angle, thus drawing a pie-shaped sector.

The starting angle and end angle Here are the angle between the radius and the x-axis, and the Radian system is used.

The last parameter is a Boolean value, True is counterclockwise, and false represents a clockwise drawing.

So draw a circle with a center coordinate of (100,100) and a radius of 50 can be written as:

Context.arc (100,100,50,0,math.pi*2,false);

Beginner canvas-Draw Basic graphics