Draw lines of HTML5 canvas Basic Drawing, html5canvas

Draw lines of HTML5 canvas Basic Drawing, html5canvas

<Canvas> </canvas>It is a new label added in HTML5 for drawing graphics. In fact, this label is the same as other labels. Its special feature is that this label can obtain a CanvasRenderingContext2D object, we can use JavaScript scripts to control this object for plotting.

<Canvas> </canvas>It is just a container for drawing graphics. In addition to attributes such as id, class, and style, there are also attributes of height and width. There are three steps to draw an element on the <canvas> element:

1. Obtain the DOM object corresponding to the <canvas> element. This is a Canvas object;
2. Call the getContext () method of the Canvas object to obtain a CanvasRenderingContext2D object;
3. Call the CanvasRenderingContext2D object for plotting.

Line attributes

In addition to the lineWidth attribute used above, the line also has the following attributes:

• LineCapSet the property or return the style of the end line cap. You can set the following values:
"Butt" adds straight edges to each end of the line (default );
"Round" adds a Circle Line cap to each end of the line;
Square adds a square Line cap to each end of the line.

• LineJoinSet or return the type of the created edge when two lines converge. You can set the following values:
"Miter" creates a tip (default );
"Bevel" creates an angle;
"Round" creates a rounded corner.

• MiterLimitSet the property or return the maximum length (10 by default ). The oblique length refers to the distance between the inner and outer corners of the interchange of two wires. MiterLimit is valid only when the lineJoin attribute is "miter.

Copy the content to the clipboard using JavaScript Code

1. Var canvas = document. getElementById ("canvas ");
2. Var context = canvas. getContext ("2d ");
3. // Test lineCap attributes
4. // Set the baseline for easy observation
5. Context. moveTo (10, 10 );
6. Context. lineTo (10,200 );
7. Context. moveTo (200,10 );
8. Context. lineTo (200,200 );
9. Context. lineWidth = "1 ";
10. Context. stroke ();
11. // Butt
12. Context. beginPath ();
13. Context. moveTo (10, 50 );
14. Context. lineTo (200,50 );
15. Context. lineCap = "butt ";
16. Context. lineWidth = "10 ";
17. Context. stroke ();
18. // Round
19. Context. beginPath ();
20. Context. moveTo (10,100 );
21. Context. lineTo (200,100 );
22. Context. lineCap = "round ";
23. Context. lineWidth = "10 ";
24. Context. stroke ();
25. // Square
26. Context. beginPath ();
27. Context. moveTo (10,150 );
28. Context. lineTo (200,150 );
29. Context. lineCap = "square ";
30. Context. lineWidth = "10 ";
31. Context. stroke ();
33. // Test the linJoin attribute
34. // Miter
35. Context. beginPath ();
36. Context. moveTo );
37. Context. lineTo (450,100 );
38. Context. lineTo (300,150 );
39. Context. lineJoin = "miter ";
40. Context. lineWidth = "10 ";
41. Context. stroke ();
42. // Round
43. Context. beginPath ();
44. Context. moveTo (400,50 );
45. Context. lineTo (550,100 );
46. Context. lineTo (400,150 );
47. Context. lineJoin = "round ";
48. Context. lineWidth = "10 ";
49. Context. stroke ();
50. // Square
51. Context. beginPath ();
52. Context. moveTo (, 50 );
53. Context. lineTo (650,100 );
54. Context. lineTo (500,150 );
55. Context. lineJoin = "bevel ";
56. Context. lineWidth = "10 ";
57. Context. stroke ();
59. // Test the miterLimit attribute
60. Context. beginPath ();
61. Context. moveTo (700,50 );
62. Context. lineTo (850,100 );
63. Context. lineTo (700,150 );
64. Context. lineJoin = "miter ";
65. Context. miterLimit = "2 ";
66. Context. lineWidth = "10 ";
67. Context. strokeStyle = "# 2913EC ";
68. Context. stroke ();

The effects of different values of each attribute are as follows:

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.