HTML5 step by step -- Canvas (4)

Draw the first image:
<Canvas width = "1200" height = "800">
The current browser does not support Canvas <! -- Text prompt information displayed when the browser does not support canvas -->
</Canvas>

Javascript is required:
The Code is as follows: the Code uses the jquery pre-loading method $ (function (){})
[Javascript] view plaincopyprint?
<Span style = "font-size: 18px;"> <span style = "white-space: pre"> </span >$ (function (){
Var canvas = document. querySelector ("canvas"); // obtain the canvas object.
Var context = canvas. getContext ('2d '); // draw a two-dimensional image, that is, draw a plane image.
Context. fillStyle = 'red'; // fill mode, color
Context. fillRect (0, 0,800,600); // rectangular area
Context. fillStyle = 'rgba (255,255, 0, 0.5) '; // use the RGB + Alpha channel to add transparency to the standard color.
Context. fillRect (400,200,800,600 );
}); </Span>

Using the code above, we can draw two rectangular images with transparency.
Figure:
 

There are three methods to draw a rectangle object:
-- Context. fillRect (x, y, w, h); // fill the rectangular area
-- Context. strokeRect (x, y, w, h); // fill the boundary area of the rectangle.
-- Context. clearRect (x, y, w, h); // clearRect is equivalent to an eraser. Erase the content of the rectangle.

Colors are defined as follows:
Method Value
Hexadecimal (Hexadecimal) # ff0000
Hexadecimal (hexadecimal) # f00
Rgb (standard color) rgb (255, 0, 0)
Rgb (parcent) (in percentages, specify the standard color) rgb (100%, 0%, 0%)
Rgba (standard color + alpha channel, that is, transparent effect) rgba (1.0, 0)
Rgba (standard color + alpha channel as a percentage) rgba (100%, 0%, 0%, 1.0)
Hsl (tone (H), saturation (S), brightness (L) hsl (0,100%, 50%)
Hsla (based on hsl + alpha transparent channel) hsla (0,100%, 50%, 1.0)
Svg (named color) (color defined by a standard name) red

Shadow effect:
Shadow, Which is used based on context.
For example:
Context. shadowOffsetX = 2.0; // how much is protruding above the X axis?
Context. shadowOffsetY = 2.0; // What is the convex value on the Y axis?
Context. shadowColor = "rgba (50%, 50%, 50%, 0.75)"; // shadow color
Context. shadowBlur = 2.0; // blur degree

Fill effect Gradients:
There are two types of division: linear gradient, center area gradient
Linear Gradient example:
1. Set the start position and end position
Var linGrad = context. createLinearGradient (0,450,100 );
2. nodes in the gradient (for example, the first gradient is red, yellow, orange, and purple ):
LinGrad. addColorStop (0.0, 'red ');
LinGrad. addColorStop (0.5, 'yellow ');
LinGrad. addColorStop (0.7, 'Orange ');
LinGrad. addColorStop (1.0, 'purple ');
3. Apply it to graphics:
Context. fillStyle = linGrad;
Context. fillRect (0,450,100 );

An example of gradient in the center area (a gradient with a certain point as the center .) :
1. Define the gradient area:
Var radGrad = context. createRadialGradient (260,320, 40,200,400,200 );
2. Define a node:
RadGrad. addColorStop (0.0, 'yellow ');
RadGrad. addColorStop (0.9, 'Orange ');
RadGrad. addColorStop (1.0, 'rgba )');
3. Define the filling object
Context. fillStyle = radGrad;
Context. fillRect (0,200,400,400 );

CreateRadialGradient parsing:
Syntax: createLinearGradient (xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)
Parameter meaning:
XStart and yStart: coordinates of the center of the Start circle (that is, the origin ).
RadiusStart: the diameter of the Start circle.
XEnd and yEnd: coordinates of the center of the ending circle.
RadiusEnd: the diameter of the ending circle.

Path rendering (Paths ):
1. Start plotting:
Context. beginPath ();
2. Define all nodes
Context. moveTo (300,700 );
Context. lineTo (600,100 );
Context. lineTo (900,700 );
Context. moveTo (350,400 );
Context. lineTo (850,400 );
3. Use stroke to draw:
Context. stroke ();

Draw line: context. lineTo (x, y );

Parabolic: context. quadraticCurveTo (cpx, cpy, x, y );
CpX, cpY: coordinates of the control point.
X, y: coordinates of the end point of the curve.

BezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y );
CpX1, cpY1: coordinates of the control point associated with the start point (current position) of the curve.
CpX2, cpY2: coordinates of the control point associated with the end point of the curve.
X, y: coordinates of the end point of the curve.

Custom curve: arcs: context. arcTo (x1, y1, x2, y2, radius );
X1, y1: Coordinate of Point P1.
X2, y2: Coordinate of point P2.
Radius: defines the radius of the circular arc.
The second method of drawing an arc:
Arc defined by radians: context. arc (x, y, radius, startAngle, endAngle, anticlockwise)
Arc (defines a center point, radius, start angle, end angle, and drawing direction: clockwise or counterclockwise)
Draw a rectangle object: context. rect (x, y, w, h );

The boundary filling is determined by strokeStyle:
Context. lineWidth = [pixel] // The lineWidth is defined in pixels.
Context. lineCap = [* butt, round, square] // defines the border Style
Context. lineJoin = [bevel, round, * miter] // define a connection

Author: shiyuan17