Canvas, a new core tool for HTML5

Canvas, a new core tool for HTML5
Preparations before painting: 1. Add the canvas label to the body and set its id, width, and height. Of course, you can also dynamically set its width and height. <Canvas id = "mycanvas" width = "1200" height = "500"> </canvas> 2. obtain the context obj of the canvas object. getContext (par). The par parameter is "2d". Currently, the canvas only supports 2d effects. Var ctx = document. getElementById ("mycanvas "). getContext ("2d"); then you have a 1200*500 "canvas" and a paint brush named "ctx". Next we start to draw some of the simplest images. The sample code is as follows: copy the code var ctx = document. getElementById ("container "). getContext ("2d"); ctx. fillStyle = "blue"; ctx. fillRect (200,100,); ctx. lineWidth = 10; ctx. strokeStyle = "red"; ctx. strokeRect (200,100, 10,); copy the Code where fill indicates filling, and stroke indicates drawing only the border. Similarly, fillRect indicates a solid rectangle, and strokeRect indicates a rectangle border. They all have four parameters: x, y, w, and h. FillStyle indicates the fill style, and strokeStyle indicates the border style. LineWidth indicates the line width. Note that you should set the style before drawing the image. Otherwise, the style will not be rendered. When drawing multiple images, you should open the drawing path before drawing a drawing. After the customization is complete, close the drawing path and draw the custom image. For example, the standard syntax for the above example should be: copy the code var ctx = document. getElementById ("container "). getContext ("2d"); ctx. beginPath (); ctx. fillStyle = "blue"; ctx. fillRect (200,100,); ctx. closePath (); ctx. stroke (); ctx. beginPath (); ctx. lineWidth = 10; ctx. strokeStyle = "red"; ctx. strokeRect (200,100, 10,); ctx. closePath (); ctx. stroke (); copy the beginPath () code to open the drawing path, closePath () to close the drawing path, and stroke () to draw custom images. In subsequent exercises, you must develop a habit. Otherwise, when you draw a line, you will find that the line due to the drawing path is not closed. Draw a line: The sample code is as follows: copy the code var ctx = document. getElementById ("container "). getContext ("2d"); ctx. beginPath (); ctx. moveTo (400,100); ctx. lineTo (300,200); ctx. lineTo (350,200); ctx. lineTo (250,300); ctx. lineTo (400,300); ctx. closePath (); ctx. stroke (); copy the Code where moveTo indicates the position where the paint brush is moved to a coordinate, and lineTo indicates the position where the paint brush is positioned. This time we want to draw a simple canopy visible. Here we only draw half of it. (400,100) the position is the top of the tree, (400,300) the position is the center of the tree bottom, and the line is automatically closed, which is the result of closing the drawing path. Next we finish painting the other half and fill the tree with green: copy the code var ctx = document. getElementById ("container "). getContext ("2d"); ctx. beginPath (); ctx. fillStyle = "green"; ctx. moveTo (400,100); ctx. lineTo (300,200); ctx. lineTo (350,200); ctx. lineTo (250,300); ctx. lineTo (400,300); ctx. lineTo (550,300); ctx. lineTo (450,200); ctx. lineTo (500,200); ctx. lineTo (400,100); ctx. fill (); ctx. closePath (); ctx. stroke (); copy the code and note that the last fill () is the fill style: Draw a circle: Sample Code: v Ar ctx = document. getElementById ("container "). getContext ("2d"); ctx. beginPath (); ctx. arc (200,200,100, 0,360 * Math. PI/180, true); ctx. closePath (); ctx. stroke (); arc (x, y, r, starta, enda, anti); parameters are represented by the center's horizontal and vertical coordinates, radius, and start angle (to be converted to radians), termination angle, and draw direction. Draw circles with canvas. If you are new to contact us, you will find it difficult because many of its parameters are opposite. I would like to say a few more words to everyone. The calculation of the starting and ending angles is different from the calculation of the mathematical angle. The angle in mathematics is positive counterclockwise, and the starting and ending angles here are positive clockwise, that is, when you set the starting angle to 0 degrees and the ending angle to 120 degrees. It calculates the angle from the horizontal position on the right. In addition, in the drawing direction, "true" indicates the clockwise direction and "false" indicates the clockwise direction. If you are dizzy, refer to the following example: ctx. arc (200,200,100, 0,120 * Math. PI/180, true); set the starting angle to 0 and ending angle to 120. The mathematical thought should be an arc smaller than the upper half of the semi-circle, and the result: true indicates that the arc is drawn counterclockwise, so the drawn image is larger than the half-circle. If it is set to false: At this time, the drawing drawn Clockwise is less than half a circle. Here, we can also understand that the angle calculation direction of arc is opposite to that of mathematics. Do you want to draw a small half circle on the top? Set the ending angle to-120 degrees, and set the direction to true. So many of our friends are hoping to avoid detours. Draw shadow: copy the code var ctx = document. getElementById ("container "). getContext ("2d"); ctx. beginPath (); ctx. fillStyle = "gray"; ctx. shadowOffsetX = 5; ctx. shadowOffsetY = 5; ctx. shadowColor = "gold"; ctx. shadowBlur = 5; ctx. fillRect (100,100,); ctx. closePath (); ctx. stroke (); copy the codes shadowOffsetX and shadowOffsetY to indicate the horizontal and vertical offsets of shadows. shadowColor indicates the shadowColor and shadowBlur indicates the fuzzy level. As I have already mentioned a lot about shadow in my previous blog posts on CSS3, I have mentioned it here. You still need to note that, first set the style, and then draw a rectangle, the reverse order will not render the effect. Draw gradient: linear gradient: copy the code ctx. beginPath (); var Color = ctx. createLinearGradient (500,500,500, 0); Color. addColorStop (0.3, "orange"); Color. addColorStop (0.5, "yellow"); Color. addColorStop (1, "gray"); ctx. fillStyle = Color; ctx. fillRect (0, 0, 1200,500); ctx. closePath (); ctx. stroke (); copy the code to write: ctx. createLinearGradient () is assigned to a color variable. You can add multiple gradient colors to the color variable. addColorStop has two parameters: 1. offset (0-1) 2. color. Finally, assign the color variable to fillStyle. CreateLinearGradient () has four parameters: 1 and 2 indicate the start surface, and 3 and 4 indicate the last surface. Radial Gradient: copy the code ctx. beginPath (); ctx. arc (500,300,100, 0,360 * Math. PI/180, true); var Color = ctx. createRadialGradient (500,300, 30,500,300,100); Color. addColorStop (0, "red"); Color. addColorStop (0.5, "orange"); Color. addColorStop (1, "yellow"); ctx. fillStyle = Color; ctx. fill (); ctx. closePath (); ctx. stroke (); the replication code is similar to the linear gradient. The difference is that its name is createRadialGradient (), which has six parameters: 1, 2. coordinates of the center of the starting circle of the gradient, 3. radius of the starting circle of the gradient, 4, 5. coordinates of the center of the gradient ending circle, 6. radius of the ending circle of the gradient. Draw text: copy the code ctx. beginPath (); ctx. strokeStyle = "gold"; ctx. fillStyle = "bule"; ctx. font = "50px "; ctx. strokeText ("hello world! ", 700,200); ctx. font =" 30px "; ctx. fillText (" hello kitty? ", 700,300); ctx. fill (); ctx. closePath (); ctx. stroke (); copy the code fillText (text, x, y, [maxwidth]) to draw a string, text indicates the text content, x, y text coordinate position. [Maxwidth] (optional) Maximum character width to prevent overflow. Font. Other parameters: set the text horizontal alignment mode in textAlign to start | end | left | right | the default value in center is starttextBaseline. Set the text vertical alignment mode to top | hanging | middle | alphabetic | ideographic | bootom Default value if you are interested in alphabetic, try it yourself. Image Rendering: calling... after writing for half a day, I finally wrote the topic. Compared with the drawing of the simple image above, I need to draw more images, especially in the game. Here is a simple method. First, write it in the body: <div class = "hide"> </div> Add the image you want to draw to the body first, then, hide the parent div. A hidden div can be placed into all the images or even audio files to be drawn in a project, just like a material library invisible to others. Then: var ctx = document. getElementById ("mycanvas "). getContext ("2d"); var img = document. getElementById ("myImg"); ctx. beginPath (); ctx. drawImage (img, x, y); ctx. closePath (); ctx. stroke (); to get the image object you want to draw, draw through drawImage. Here, drawImage () can have three parameters, five parameters, and nine parameters. Three parameters: 1. image objects to be drawn 2, 3. image coordinate; five parameters: 1. image objects to be drawn 2, 3. image coordinates 4, 5. image width and height; 9 parameters: 1. image objects to be drawn 2, 3. draw the horizontal and vertical cutting points of the image. 4. horizontal cutting width 5. longitudinal cutting height 6, 7. the coordinates of the cut image are 8, 9. width and height of the cut image.