A wave of HTML5Canvas Basic Drawing instance code collection _ html5 tutorial skills-

This article mainly introduces a wave of HTML5Canvas Basic Drawing instance code sets, including the drawing of basic images such as circular rectangular rounded corners. For more information, see Basic Drawing

Copy XML/HTML Code to clipboard

1. Var canvas = document. getElementById ('canvas ');
2. If (canvas. getContext ){
3. Var context = canvas. getContext ('2d ');
4. // Line width
5. Context. lineWidth = 4;
6. // Paint brush color
7. Context. strokeStyle = 'red ';
8. // Fill color
9. Context. fillStyle = "red ";
10. // Line Cap Type
11. Context. lineCap = 'butt'; // round, square
12. // Start path
13. Context. beginPath ();
14. // Start point
15. Context. moveTo (10, 10 );
16. // End point
17. Context. lineTo (150,50 );
18. // Draw
19. Context. stroke ();
20. }

Rectangle

Copy XML/HTML Code to clipboard

1. Var canvas = document. getElementById ('canvas ');
2. If (canvas. getContext ){
3. Context. beginPath ();
4. Context. strokeRect (10, 10, 70, 40 );
5. // Another method of rectangle
6. Context. rect (10, 10.70, 40 );
7. Context. stroke ();
9. // Solid rectangle
10. Context. beginPath ();
11. Context. fillRect (10, 10, 70, 40 );
12. // Another method is solid rectangle.
13. Context. beginPath ();
14. Context. rect (10, 10, 70, 40 );
15. Context. fill ();
16. }

Circle

Copy XML/HTML Code to clipboard

1. Var canvas = document. getElementById ('canvas ');
2. If (canvas. getContext ){
3. Context. beginPath ();
4. // Center coordinate x, Center Coordinate Y, arc radius, start angle, end angle, and counter-clockwise
5. // The Second and Fifth parameters are radians to be passed in. If you draw 30 degrees, you need to convert them to radians 30 * Math. PI/4th.
6. Context. arc (100,100, 130, 180 * Math. PI/, true );
7. Context. stroke ();
8. Context. fill ();
9. }

Rounded corner

Copy XML/HTML Code to clipboard

1. Var canvas = document. getElementById ('canvas ');
2. If (canvas. getContext ){
3. Context. beginPath ();
4. Context. moveTo (20, 20 );
5. Context. lineTo (70, 20 );
6. // Draw a radian p1.x p1.y p2.x and a p2.y Arc Radius for a path,
7. Context. arcTo (, 30, 70, 50 );
8. Context. lineTo (120,120 );
9. Context. stroke ();
11. // Erase the canvas
12. Context. beginPath ();
13. Context. fillRect (10, 10, 200,100 );
15. // Erase the region
16. Context. clearRect (30, 30, 50, 50 );
17. }

Secondary besell Curve

Copy XML/HTML Code to clipboard

1. Var canvas = document. getElementById ('canvas ');
2. If (canvas. getContext ){
3. Context. beginPath ();
4. Context. moveTo (100,100 );
5. Context. quadraticCurveTo (, 20 );
6. Context. stroke ();
7. }

Cubic besell Curve

Copy XML/HTML Code to clipboard

1. Var canvas = document. getElementById ('canvas ');
2. If (canvas. getContext ){
3. Context. moveTo (68,130 );
4. Var cX1 = 20;
5. Var cY1 = 10;
6. Var cX2 = 268;
7. Var cY2 = 10;
8. Var endpoints = 268;
9. Var endY = 170;
10. Context. bezierCurveTo (cX1, cY1, cX2, cY2, endX, endY );
11. Context. stroke ();
13. // Use clip to specify the drawing area. After specifying the drawing area, you can only clean the painting in the drawing area.
14. // Draw a circle
15. Context. arc (100,100, 360, 180 * Math. PI/, true );
16. // Restricted Area
17. Context. clip ();
18. // Start to try to draw other
19. Context. beginPath ();
20. Context. fillStyle = 'lightblue ';
21. // The result rectangle is not displayed.
22. Context. fillRect (0, 0, 300,150 );
23. }

Advanced use of artboard

Copy XML/HTML Code to clipboard

1. Var canvas = document. getElementById ('canvas ');
2. If (canvas. getContext ){
3. Var context = canvas. getContext ('2d ');
4. /*
5. * DrawImage (image, dx, dy)
6. * DrawImage (image, dx, dy, dw, dh)
7. * DrawImage (image, sx, sy, sw, sh, dx, dy, dw, dh );
8. * Image Drawing Object
9. * Dx dy canvas coordinates
10. * Dw, dh indicates the position of the image to be drawn in the canvas
11. * Sw, sh indicates the area of the image to be drawn
12. * Sx, start position of the sy drawing
13. */
14. Var image = document. getElementById ('img ');
15. Context. drawImage (image, 0, 0 );
16. Var img = new Image ();
17. Img. src = 'images/1.jpg ';
18. Img. onload = function (){
20. // DrawImage
21. // Draw from coordinates 0, 0
22. // Context. drawImage (img, 0, 0 );
23. // From 0 to 0, draw the entire image to 100,100 long width
24. // Context. drawImage (img, 0, 0,100,100 );
25. //, Draw from 100,100 to 260,130, and place it in the 100,100 long-width Area
26. // Context. drawImage (img, 50, 50,100,100,260,130,100,100 );
28. // Use getImageData and putImageData to draw images
30. Context. drawImage (img, 10, 10 );
31. // Obtain pixel data from the canvas
32. // Start position and end position
33. Var imgData = context. getImageData (50, 50, 100,100 );
34. // Draw the data to the position coordinate specified by the drawing board
35. Context. putImageData (imgData, 10,260 );
36. // Draw a part of the acquired pixel data to the canvas.
37. Context. putImageData (imgData, 200,260, 50, 100,100 );
39. // Create a pixel using createImageData
40. Var imgData = context. getImageData (50, 50, 200,200 );
41. // Create an empty object of the specified size
42. Var imgData01 = context. createImageData (imgData );
44. For (I = 0; I
45. // Red Pixel
46. ImgData01.data [I + 0] = 255;
47. ImgData01.data [I + 1] = 0;
48. ImgData01.data [I + 2] = 0;
49. ImgData01.data [I ++ 3] = 255;
51. }
52. Context. putImageData (imgData01, 10,260 );
53. }
54. }