Html5-canvas drawing Graphics (1)

1, Canvas basic knowledge

The canvas element is a new important element in HTML5, which is designed to draw graphics, but the canvas itself does not have the ability to paint, placing a canvas element on the page, which is equivalent to placing a rectangular "canvas" in the page, and we can use the JS script in the "canvas" To draw the graph on.

1.1canvas Elements

Before drawing with canvas, we first need to place a canvas element in the page, with the following code:

<id= "MyCanvas"  width= " height"= " the" > your browser out of </canvas>

Note: (1) placing the canvas element first requires specifying the Id,widht,height three attributes, where the width and height can only be specified in this way, and cannot be specified by CSS styles

(2) The contents of the canvas tag are displayed only when the browser is not compatible with the canvas, and when the browser is compatible with the canvas, the content is not displayed and only the content that is drawn is displayed.

1.2 Drawing environment

Canvas.getcontext (ContextID)

Description :(1)ContextID Specifies the type you want to draw on the canvas. The currently unique legal value is "2d", which specifies a two-dimensional drawing.

(2) The GetContext () method returns an object that encapsulates many of the drawing methods and properties

1.3 How colors are represented

• Color name: "Red" "Green" "Blue"
• Hexadecimal color value: "#FFFFFF"
• Tri-color value: RGB (1-255,1-255,1-255)
• Four Color values: Rgba (1-255,1-255,1-255, transparency)

1.4 Coordinate system

The canvas coordinate system is a two-dimensional plane. The origin coordinate (0,0) is located in the upper-left corner of the canvas canvas, along the horizontal right direction, and the vertical direction of the y-axis.

2. Use canvas to draw rectangles

2.1 Rectangle API

1. Rect () creates a rectangle
2. FillRect () Draw ' filled ' rectangle
3. Strokerect Draw No Fill rectangle

Parameter description:

• X: Horizontal axis of the beginning of the rectangle
• Y: Ordinate of the starting point of the rectangle
• Width: Length of rectangle
• Height: Width of rectangle

2.2 Graphics Retouching

2.2.1 Color styles, shading methods and properties

Some method property usage instructions:

• Createlineargradient (Xstart,ystart,xend,yend): This method uses 4 parameters, Xstart is the horizontal axis of the starting point of the gradient, Ystart is the ordinate of the starting point of the gradient, xEnd the horizontal axis of the gradient end point, Yend as the ordinate of the gradient end point

• Addcolorstop (Offset,color): After using the Createlineargradient method to create an object that uses two coordinate points, you also need to use the Addcolorstop method to set the color of the gradient. Offset for the color you set to leave the gradient start point, the parameter is a floating point value between 0-1, I, the gradient start point offset is 0, the gradient end point offset is 1, the following is a graph to illustrate this parameter (the diagram is a blue to white and then the white gradient to the red process)

2.3 Start Draw Rectangle 2.3.1 Draw a rectangle that fills a single background color

STEP1: Placing a canvas element in the page

<canvas id="mycanvas " width=" height="  "> Your browser is out </canvas>

STEP2: Get the canvas element

var mycanvas=document.getelementbyid (' MyCanvas ');

Step3: Getting the drawing environment

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

Step4: Setting Drawing Styles

When drawing graphics with canvas, there are two ways-fill (fill) and draw the border (stroke), fill refers to fill the interior of the graphic, draw the border is not filled with graphics inside the shape of the bounding box, the canvas element in combination with the user two ways to draw graphics

// FillStyle Setting the fill color // strokestyle Setting the border color // linewidth Setting the width of the drawing border

STEP5: Start Draw Rectangle

Canvas uses the FillRect method with the Strokerect method to fill the rectangle and draw the border of the rectangle

Context.fillrect (50,50,100,100); Context.strokerect (50,50,100,100);

Effect preview:

2.3.2 drawing a linear gradient of a rectangle

Step1: In this example, we'll start with the drawing rectangle, set the rectangle style

// strokestyle Setting the border color // linewidth Setting the width of the drawing border var // Create a linear gradient object ocolor.addcolorstop (0, ' red ');   // The gradient starts with the red ocolor.addcolorstop (1, "white");  // transition to white context.fillstyle=ocolor;   // set the style of a rectangle to a linear gradient

Step2: Start Draw Rectangle

Context.strokerect (50,50,100,100); Context.fillrect (50,50,100,100);

Step3: Full Code

varMycanvas=document.getelementbyid (' MyCanvas ');//get the Canvas object
varContext=mycanvas.getcontext (' 2d ');//GetContext Returns an object that encapsulates many of the drawing's properties and methodsContext.strokestyle= ' Blue ';//strokestyle Setting the border colorcontext.linewidth=3;//linewidth Setting the width of the drawing bordervarOcolor=context.createlineargradient (0,0,150,0);//Create a linear gradient objectOcolor.addcolorstop (0, ' red ');//the gradient starts with redOcolor.addcolorstop (1, "white");//transition to WhiteContext.fillstyle=ocolor;//set the style of a rectangle to a linear gradientContext.strokerect (50,50,100,100); Context.fillrect (50,50,100,100);

Step4: Preview of effects

2.3.3 to draw a shaded rectangle

Step1: Set rectangle style and shadow style

// sets the fill color of the rectangle context.shadowblur=20;  // set the blur level of a shadow // set the color of the shadow

Step2: Start Draw Rectangle

Context.fillrect (50,50,100,100);

Step3: Full Code

var // get the Canvas object var context=mycanvas.getcontext (' 2d ');  // GetContext Returns an object that encapsulates many of the drawing's properties and methods // sets the fill color of the rectangle context.shadowblur=20;  // set the blur level of a shadow // sets the color of the Shadow Context.fillrect (50,50,100,100);

Effect preview:

Html5-canvas drawing Graphics (1)