Use HTML5 Canvas to draw beautiful graphics

<canvas></canvas> is a new tag that appears in HTML5, like all DOM objects, it has its own properties, methods, and events, where there is a way to draw, JS can invoke it to drawContext : Always feel this translates into a "context", the context is an object that encapsulates a lot of drawing functions, and the method to get this object is var context =canvas.  GetContext ("2d");

There are two ways that a canvas element paints an image, namely

Context.fill ()//Fill

Context.stroke ()//Draw Border

Style: To set the drawing styles before drawing

context.fillstyle//Fill style

Context.strokestyle//Border style

context.linewidth//graphic border width

How colors are represented:

RGB (1-255,1-255,1-255)

Rgba (1-255,1-255,1-255, transparency)

Canvas Method:

Method	Use
getContext(contextId)	Exposes the API required for drawing on canvas. The only (current) available contextID is 2d .
height	Sets the height of the canvas. The default value is 150 pixels.
width	Sets the width of the canvas. The default value is 300 pixels.
createLinearGradient(x1,y1,x2,y2)	Creates a linear gradient. The starting coordinate is x1,y1 , and the ending coordinate is x2,y2 .
createRadialGradient(x1,y1,r1,x2,y2,r2)	Creates a radial gradient. The starting coordinate of the circle is the x1,y1 radius r1 . The end coordinate of the circle is the x2,y2 radius r2 .
addColorStop(offset, color)	Adds a color stop to a gradient. The color Stop is where the color change occurs in the gradient. Offset must be between 0 and 1.
fillStyle	Sets the color used to fill an area-for example, fillStyle=‘rgb(255,0,0)‘ .
strokeStyle	Sets the color used to draw a line-for example, fillStyle=‘rgb(255,0,0)‘ .
fillRect(x,y,w,h)	Fills a rectangle anchored to x and y , width and height, w respectively h .
strokeRect(x,y,w,h)	Draws an outline of a rectangle positioned on x and y , respectively, width and height w h .
moveTo(x,y)	Moves the drawing position to the coordinates x,y .
lineTo(x,y)	Draws a straight line from the last position of the drawing method to the end x,y .

draw Rectangle   Context.fillrect (x,y,width,height)   Strokerect (x,y,width,height)

Span style= "color: #333333; Font-family:verdana,arial,sans-serif, ' Lucida Grande '; font-size:13px; line-height:23px; " >     &NBSP; x: the rectangular starting axis (the origin of the coordinates is the upper-left corner of the canvas, which is, of course, the original origin.)

Y: Rectangular start ordinate

Width: Rectangular length

Height: Rectangular Height

Use HTML5 Canvas to draw beautiful graphics