Canvas entry-1 fill mode, gradient mode, and mode

1. When defining the size of the canvas, it is best to use HTML to define the size. Using width and height, CSS will cause the canvas to be scaled according to the CSS setting method, inside the CAVAS is a 2D rendering environment

2. a canvas corresponds to a 2D rendering environment, and operations on Drawing Images are performed in a 2D rendering environment.

<canvas id="canvas-1"  style="border:solid 1px gray;" width = "400" height="400"></canvas>

A simple example

<SCRIPT type = "text/JavaScript"> var ocanvas = document. getelementbyid ('canvas-1'); var context = ocanvas. getcontext ('2d '); // point to the reference context of the 2D rendering environment. fillstyle = "# ff0000"; context. fillrect (20,20, 100,200) </SCRIPT>
Draw a 400*400 rectangle 20 PX above the left side of the canvas and fill it with # ff0000 color.

Many APIs can be called in the 2D environment of canvas.

3. Set the fillstyle attribute or return the color, gradient, or pattern used to fill the painting. We use a color above. The gradient refers to a color gradient object.

A. Create a linear gradient createlineargradient () in context () B. Then set the gradient range createlineargradient () 3. Set the stage value (addcolorstop () of the color gradient ())

VaR GRD = context. createlineargradient (, 170,0); // This is a gradient GRD from left to right. addcolorstop (0, "black"); GRD. addcolorstop (0.5, "Red"); GRD. addcolorstop (1, "White"); // from black --> Red --> White context. fillstyle = GRD; context. fillrect (0, 0, 150,100)

　　

VaR my_gradient = CTX. createlineargradient (0,170,); // from top to bottom my_gradient.addcolorstop (0, "black"); my_gradient.addcolorstop (1, "White ");

　　

Context. fillrect (0,0, 200,200); var GRD = context. createlineargradient (200,200,); diagonal gradient GRD. addcolorstop (0, "black"); GRD. addcolorstop (0.5, "Red"); GRD. addcolorstop (1, "White"); context. fillstyle = GRD; context. fillrect (0, 0, 200,200 );

4. Fill Mode

Use the pattern to fill the image createpattern (IMG, direction );

Receives two parameters, an IMG object, and a direction parameter repeat-x repeat-y

It is strange that we cannot draw it when we first run it. Instead, we can draw it by binding events,

The context. Fill () function must be added at the end of the script; otherwise, it cannot be drawn.

　　

　　　function test () {var direction = ‘repeat‘ || ‘repeat-x‘ || ‘repeat-y‘;var img = document.getElementById(‘img‘);var pat = context.createPattern(img,direction);context.rect(0,0,400,400);context.fillStyle=pat;context.fill();}