HTML5-Canvas (2)

HTML5-Canvas (2)
There are two passwords in the rectangle, ctx. fillRect (x, y, width, height) and ctx. strokeRect (x, y, width, height), x and y in the parameter still represent the starting point coordinates of the rectangle to be drawn (relative to the canvas origin ), width and height indicate the width and height of the rectangle to be drawn. FillRect indicates drawing a solid rectangle, and strokeRect indicates drawing a stroke rectangle. Here is a simple example: copy the Code <canvas id = "myCanvas" width = "200" height = "200" style = "border: solid 1px # CCC;"> canvas is not supported in your browser, we recommend that you use the latest Chrome version </canvas> <script> var c = document. getElementById ("myCanvas"); var ctx = c. getContext ("2d"); // obtain the 2D drawing environment object ctx of the canvas. fillRect (10, 10, 50, 50); // from the canvas (10, 10) the coordinate point is the starting point, draw a solid rectangle ctx with a width and height of 50 PX. strokeRect (, 50, 50); // draw a coordinate point from the canvas () as the starting point Above the stroke rectangle with a width and height of 50 PX </script>, we drew two solid and stroke rectangles with a default black color. I believe you also think of the line segment we drew in the previous chapter, if strokeStyle is not defined, the line segment is black by default. So we need to color the two rectangles. Maybe you will think that * Style should be used for processing, and this idea is correct. On the canvas, you can use fillStyle to color solid objects. You can use strokeStyle to color stroke objects. Their values are color | gradient | pattern, in the previous chapter, we have already elaborated on it. We will not go into details here. Then we fill the solid rectangle drawn above with a radial gradient (yellow-blue-red) and set the stroke of the stroke rectangle to green. We can do this: copy the Code <canvas id = "myCanvas" width = "200" height = "200" style = "border: solid 1px # CCC; "> your browser does not support canvas. We recommend that you use the latest version of Chrome </canvas> <script> var c = document. getElementById ("myCanvas"); var ctx = c. getContext ("2d"); // obtain the 2D drawing environment object var grd = ctx of the canvas. createRadialGradient (35, 35, 35, 36); // defines the radial gradient object and sets the coordinates of the start and end points of the gradient line. The coordinate format is (start point x, start point y, end point x, end Point y) grd. addColorStop (0, "yellow"); // defines the grd color of the starting point of the gradient line. addColorStop (1, 0.5, "Blue"); // defines the grd color of the center point of the gradient line. addColorStop (1, "red"); // defines the color of ctx at the end of the gradient line. fillStyle = grd; // assign the radial gradient object to fillStylectx. fillRect (10, 10, 50, 50); // from the canvas (10, 10) the coordinate point is the starting point, draw a solid rectangle ctx with a width and height of 50 PX. beginPath (); // reset the paint brush. This is a good habit of ctx. strokeStyle = "green"; // defines the stroke color as green ctx. strokeRect (, 50, 50); // draw a stroke rectangle with a width and height of 50px from the coordinate point () on the canvas as the starting point. </script> the copy code is as follows: the createRadialGradient method, which has not been carefully introduced in the previous chapter, is mentioned here. Its syntax is ctx. createRadialGra Dient (Xstart, Ystart, Radiusstart, Xend, Yend, and Radiusend) the first three parameters indicate the center coordinates and radius of the starting circle of the gradient, the last three parameters indicate the midpoint coordinates and radius of the circle ending with the gradient. You may be confused by the "radius" here. Looking back at the createLinearGradient we learned in the previous chapter, its parameters do not have the concept of "radius". If you are a plane designer, you may think that radial gradient only requires the coordinates of the starting point and the ending point (after all, radial gradient in PS/AI only requires these two points ). However, the "radius" parameter added to canvas can still be used to create a slightly more complex effect than the radial gradient in PS. (1) Let's take the simplest and best-understood example: copy the code var c = document. getElementById ("myCanvas"); var ctx = c. getContext ("2d"); // obtain the 2D drawing environment object var grd = ctx of the canvas. createRadialGradient (70, 70, 70,100,); // defines a radial gradient object, sets the starting and ending circles to overlap the midpoint, and the starting circle radius is 0 GRD. addColorStop (0, "yellow"); // defines the grd color of the starting point of the gradient line. addColorStop (0.5, "blue"); // defines the grd color of the intermediate point of the gradient line. addColorStop (1, "rgba (, 0,)"); // defines the color of the end point of the gradient line, where the color transparency is 0ctx. fillStyle = grd; // assign the radial gradient object to fillStylectx. FillRect (0, 0, c. width, c. height); // draw a solid rectangle with the same size as the canvas copy code. We set the starting circle to be the same as the center of the ending circle, and the radius of the starting circle to 0, then its gradient line starts from the midpoint of the two circles and ends at the edge of the ending circle. We set the color transparency of the gradient Line End Point to 0 to facilitate viewing the border of the ending circle. The result is as follows: (2) we set the radius of the starting circle to 20 on the basis of (1). The Code is as follows: copy the code var c = document. getElementById ("myCanvas"); var ctx = c. getContext ("2d"); // obtain the 2D drawing environment object var grd = ctx of the canvas. createRadialGradient (70,100,); // defines the radial gradient object, sets the starting and ending circles to overlap the midpoint, and the starting circle radius is 20grd. addColorStop (0, "yellow"); grd. addColorStop (0.5, "blue"); grd. addColorStop (1, "rgba (, 0,)"); ctx. fillStyle = grd; ctx. fillRect (0, 0, c. width, c. height); copy the code (3) we move the starting circle on the basis of (2) Do not overlap the midpoint of the ending circle. The Code is as follows: copy the code var c = document. getElementById ("myCanvas"); var ctx = c. getContext ("2d"); // obtain the 2D drawing environment object var grd = ctx of the canvas. createRadialGradient (60, 40, 20, 70, 70,100); // The starting circle not only has a radius, but also has different grd points between the midpoint and the ending circle. addColorStop (0, "yellow"); grd. addColorStop (0.5, "blue"); grd. addColorStop (1, "rgba (, 0,)"); ctx. fillStyle = grd; ctx. fillRect (0, 0, c. width, c. height); copy the code. Note that when defining RadialGradient, we should avoid the range of the starting circle from exceeding the knot. The range of the bundle circle (the starting circle should be a real subset inside the ending circle). Otherwise, unexpected errors may occur in the drawn results, such as the following code: copy the code var c = document. getElementById ("myCanvas"); var ctx = c. getContext ("2d"); // obtain the 2D drawing environment object var grd = ctx of the canvas. createRadialGradient (60, 60, 50, 70, 70, 50); // the left side of the starting circle exceeds the grd in the inner area of the ending circle. addColorStop (0, "yellow"); grd. addColorStop (0.5, "blue"); grd. addColorStop (1, "rgba (, 0,)"); ctx. fillStyle = grd; ctx. fillRect (0, 0, c. width, c. height); copy the code: now we have learned FillRect and strokeRect are used to draw a rectangle. Next we will talk about the Rect-related function-clearRect. Like the square eraser in PS, clearRect can erase the content of any rectangular area on the canvas. Its syntax is as follows: ctx. clearRect (x, y, width, height); x and y represent the coordinate of the starting point, and width and height represent the width and height of the "eraser. For example, copy the code var c = document. getElementById ("myCanvas"); var ctx = c. getContext ("2d"); // obtain the 2D drawing environment object ctx of the canvas. fillStyle = "red"; ctx. fillRect (0, 0, c. width, c. height); ctx. beginPath (); ctx. fillStyle = "blue"; ctx. fillRect (10, 20, 60, 60); ctx. clearRect (20, 20, 80, 50); // erase the code from the region where (20, 20) coordinates are used as the starting point and the width and height are 80*50. The result is as follows: note that clearRect does not clear the previously defined drawing information, such as the style and brush position. For example, if we need to clear the entire canvas, we can copy the code var c = document. getElementById ("myCanvas"); var ctx = c. getContext ("2d"); // obtain the 2D drawing environment object ctx of the canvas. fillStyle = "blue"; ctx. fillRect (10, 20, 60, 60); // reset the canvas size below to clear the canvas c. width = c. width; // in jQ, it can be written as c. attr ("width", c. width (); c. height = c. height; // in jQ, it can be written as c. attr ("height", c. height (); // re-draw a rectangle ctx. fillRect (10, 20, 60, 60); copy the code by resetting the canvas size to trigger the clear canvas event, but the previously defined fillStyle = "blue" is also cleared, A black rectangle is drawn. If you do not want to clear the previously defined style, you can use clearRect to copy the code var c = document. getElementById ("myCanvas"); var ctx = c. getContext ("2d"); // obtain the 2D drawing environment object ctx of the canvas. fillStyle = "blue"; ctx. fillRect (10, 20, 60, 60); // The canvas ctx is erased through clearRect below. clearRect (0, 0, c. width, c. height); // re-draw a rectangle ctx. fillRect (10, 20, 60, 60); copy the code execution result as follows: Finally, let's talk about the polygon painting. Its implementation is very simple. First, let's take an example: copy the code var c = document. getElementById ("myCanvas"); var ctx = c. getContext ("2d"); // obtain the 2D drawing environment object of the canvas // define the style ctx. fillStyle = "blue"; ctx. strokeStyle = "red"; ctx. lineWidth = "8"; ctx. lineJoin = "round"; // draw a polygon ctx. moveTo (10, 10); ctx. lineTo (100,30); ctx. lineTo (120,80); ctx. lineTo (60, 60); ctx. lineTo (10, 10); ctx. stroke (); // stroke ctx. fill (); // fill the copy code. We can see that each side of the polygon is drawn through lineTo (note that the start and end points are the same coordinates), and then through stroke () fill in by stroke and fill (). The execution result is as follows: A friend of the eye will find that the two strokes in the upper left corner of the polygon are not connected together, this is because we didn't close the polygon path. We can use ctx. closePath () to solve this problem: copy the code var c = document. getElementById ("myCanvas"); var ctx = c. getContext ("2d"); // obtain the 2D drawing environment object of the canvas // define the style ctx. fillStyle = "blue"; ctx. strokeStyle = "red"; ctx. lineWidth = "8"; ctx. lineJoin = "round"; // draw a polygon ctx. moveTo (10, 10); ctx. lineTo (100,30); ctx. lineTo (120,80); ctx. lineTo (60, 60); ctx. lineTo (10, 10); ctx. closePath (); // closure polygon path ctx. stroke (); // stroke ctx. fill (); // fill