Canvas Canvas in the HTML5

---restore content starts---

Newly added elements in HTML5, canvas now supports ie9+ version

Note: HTML5 <canvas> elements are used for drawing drawings, which are done by script (usually Javascript).

<canvas> tags are just graphics containers, and you must use scripts to draw graphics.

The user should be given a description of the version that must be ie9+ before using canvas, otherwise it is not supported.

Draw a simple line

1. Get the canvas first

var canvas = document.getElementById (' canvas ');

2. Configuring the Drawing environment

var context = Canvas.getcontext (' 2d ');

3. Before drawing, add

Context.beginpath (); It means to start drawing

4. Setting the starting point

Context.moveto (10,10); The first parameter here is the x-axis, the second parameter is the y-axis

5. Set the next point,

Context.lineto (x, y); Next point coordinates

6. End Drawing

Context.closepath ();

Context.stroke ();

There are two ways that a canvas element paints an Image:

Context.fill ()//Fill

Context.stroke (); Draw Border

But before you draw them, set their styles first.

context.fillstyle//-filled style

For example: Context.fillstyle = ' pink '; The color of the fill is pink

context.strokestyle//border Style

Context.linewidth = 10; Set the line width to 10

There are two paths to the canvas element in drawing an image

A.context.beginpath () Start drawing

B.context.closepath () End drawing

1, the system default in drawing the first path start point is Beginpath.

2, if the previous path has not been re-specified Beginpath, then draw the other path will be the previous most recently specified Beginpath after the entire path is redrawn.

If it's difficult to understand, then you just have to remember that each draw path is preceded and Context.beginpath () and Context.closepath ().

Draw a rectangle

The canvas's origin coordinates are the upper-left corner.

Context.strokerect (100,100, 50,50);//x y width heigth parameters draw a hollow rectangle

Context.fillrect (100,100,100,100); Draw a solid rectangle

there is a drawing on the empty context.clearrect (x,y,width,height);

x: Clear Rectangle start Axis y: Clear rectangle start ordinate width: Clear Rectangle length height : Clear Rectangle height

Draw a Circle

Context.arc (250,250,100,0,math.pi,true); There are 6 parameters Math.PI is 180 degrees

First: X-axis coordinate of the center fourth: starting angle (Straangle)

Second: y-coordinate of the center fifth: End Angle (endangle)

Third: The length of the radius sixth: whether it is counterclockwise true) is counterclockwise, (false) is clockwise

Context.arc (200,200,50,0,math.pi*0.5,true);
Context.stroke (); Here's the picture.

Linear Gradient

var lg = Context.createlineargradient (x start position, y start position, x end position, y end position);

Linear gradient Color Lg.addcolorstop (offset,color)// offset: Set color offset from gradient end point (0~1) color : Colors to use when drawing

Radial gradient

var rg = context.createradialgradient (xstart,ystart,radiusstart,xend,yend,radiusend);

1. xstart: Divergence start center x coordinate 2. Ystart: Divergence start center y coordinate 3. Radiusstart: The radius of the start circle divergence

4. XEnd: The x-coordinate of the center of divergence ends 5. Yend: The y-coordinate of the center of divergence ends 6. Radiusend: The radius of the diverging end Circle

Radial gradient Color rg.addcolorstop (offset,color)

Rotation of the graph rotate ()

Context.rotate (MATH.PI/4); It means the degree of rotation of the axis.

Panning Translate for graphics ()

context.translate (x, y); Shift amount of the x-axis y-axis

Scaling scale for graphs ()

Context.scale (x, y),//x-axis scaled by x scale y-axis scaled by Y scale

Shadow of the graph Shadow ()

Context.shadowoffsetx = 5; The offset of the shadow on the x-axis

Context.shadowoffsety = 5; The offset of the shadow on the y-axis

Context.shadowcolor = ' red '; Set the color of the shadow

Context.shadowblur = 100; The degree of ambiguity (the larger the value the more blurred)

combination of graphs Context.globalcompositeoperation=type

The graphic combination is two graphics superimposed on each other the form of the graphic, is after the painting of the cover out of the first, or overlapping parts do not display and so on, as to how the display depends on the value of type

Type
source-over(default): Draw a new shape on the original drawing
destination-over: Drawing a new graphic under the original drawing
source-in: Shows the intersection of the original and new shapes, the new shape is on, so the color is the color of the new graphic
destination-in: Displays the intersection of the original graphic and the new shape, the original graphic is on, so the color is the color of the original graphic
source-out: Show only new graphics non-intersecting sections
destination-out: Show only the non-intersecting parts of the original graphic
source-atop: Displays the original shape and intersection part, the new shape is on, so the intersection part of the color is the color of the new graphic
destination-atop: Displays the new shape and intersection section, the new shape under, so the color of the intersection part is the color of the original graphic
Lighter: Both the original and new graphics are displayed, and the intersection part is color superimposed.
xor: Overlapping fly part unrealistic
copy: Show only new graphics

---restore content ends---

Canvas Canvas in the HTML5