Canvas draws a rectangle, circle, irregular image (line), gradient and other image effects

 

Draw a rectangle:

The getContext ("2d") object is a built-in HTML5 object. It has multiple ways to draw paths, rectangles, circles, characters, and add images.

The fillStyle method colors it red, and the fillRect method specifies the shape, position, and size.

 

<! DOCTYPE html> 
 
Draw a circle:
The arc method of the object is used to create a circular path. The method definition is XXX. arc (x, y, radius, startAngle, endAngle, anticlockwise)
X is the abscissa of the circular starting point, y is the ordinate of the circular starting point, radius is the circular radius, startAngle is the starting angle, endAngle is the ending angle, and anticlockwise is drawn clockwise.
XXX. beginPath (): create a path. XXX. closePath (): End the path. Then, render XXX. fill.
 
<Script> var c = document. getElementById ("myCanvas"); var cxt = c. getContext ("2d"); cxt. fillStyle = "# ff0000"; cxt. beginPath (); cxt. arc (50,50, 30,0, Math. PI * 2, true); cxt. closePath (); cxt. fill (); </script>
 
Draw line shape:
MoveTox, y) specifies where (x, y) and lineTo specifies where to end to draw a line:
Then, you can call stroke () to draw the image.
<Script> var c = document. getElementById ("myCanvas"); var cxt = c. getContext ("2d"); cxt. moveTo (20, 20); cxt. lineTo (40, 90); cxt. lineTo (80, 70); cxt. lineTo (130,90); cxt. stroke (); </script>
 
Draw the gradient effect:
Use the color you specified to draw the gradient background, which is similar to the normal rectangle, but the value of fillStyle is gradient.
Linear gradient:
Method createLinearGradient (150,100,); specifies the linear gradient range.
Method grd. addColorStop (0, "# ff0000 ");
Grd. addColorStop (1, "#00ff00"); specify the gradient "start and end" for the gradient"
If you want to implement a linear gradient between upper and lower, you should ensure the point (x0, y0) when calling createLinearGradient (x0, y0, x1, y1) to create the gradient ), the straight line connecting points (x1, y1) is a vertical line, that is, x0 = x1.
Of course, you can also achieve the diagonal gradient effect, as long as (x0, y0) (x1, y1) to form a diagonal line.
You can create an upper or lower gradient and a diagonal gradient as follows:
CreateLinearGradient (0,300,); // Create a gradient
CreateLinearGradient (10, 10, 300,300); // Create a diagonal gradient
<Script> var c = document. getElementById ("myCanvas"); var cxt = c. getContext ("2d"); var grd = cxt. createLinearGradient (0, 0, 150,100); grd. addColorStop (0, "# ff0000"); grd. addColorStop (1, "#00ff00"); cxt. fillStyle = grd; cxt. fillRect (,); </script>
 
Radial gradient:
CreateRadialGradient (x0, y0, r0, x1, y1, r1)
Create a gradient drawing along the cone between two circles. The first three parameters represent a starting circle with a center (x0, y0) radius of r0, and the last three parameters represent the ending circle with a center (x1, y1) radius of r1.
For example, var grd = cxt. createRadialGradient (100,100, 30,100,100, 70)
A gradient effect is created for a circle with a circle (100,100) with a radius of 30 --- the circle with a center (100,100) radius of 70.
Canvas draws a rectangle, circle, irregular image (line), gradient and other image effects