I drew several basic figures based on the official example. I have some knowledge about HTML5 Canvas, but I feel that I have forgotten the mathematical knowledge. Although I was a math competitor, I have not used it for many years, forgotten.
The canvas Element of HTML5 only provides a canvas, and the actual painting is done by javascript.
The basic HTML is not to mention, that is, to build a shelf, put a <canvas> element, and introduce some javascript files first. Each js file here is an example of drawing.
1. <! DOCTYPE html>
2. 3. <meta charset = "UTF-8">
4. <title> HTML5 Canvas DEMO </title>
5. <script type = "text/javascript" src = "js/drawRect. js"> </script>
6. <script type = "text/javascript" src = "js/drawPath. js"> </script>
7. <script type = "text/javascript" src = "js/drawLine. js"> </script>
8. <script type = "text/javascript" src = "js/drawLinearGradient. js"> </script>
9. <script type = "text/javascript" src = "js/drawTransformShape. js"> </script>
10. <script type = "text/javascript" src = "js/drawAll. js"> </script>
11. 12.
13. <body onload = "drawAll ('canvas ')"> </body>
14. 15. <canvas id = "canvas" width = "400" height = "300"/>
16. <br>
Example 1: Draw a rectangle
1 ./**
2. * This file is confidential by Charles. Wang
3. * Copyright belongs to Charles. wang
4. * You can make contact with Charles. Wang (charles_wang888@126.com)
5 .*/
6.
7. // This js code is used to draw a rectangle.
8. // The parameter is the id of the canvas passed in, indicating where the code is drawn
9. function drawRect (id ){
10.
11. // obtain the canvas object, that is, the canvas object to be drawn by the js Code.
12. var canvas = document. getElementById ('canvas ');
13. if (canvas = null)
14. return false;
15.
16. // obtain the graphic context from the canvas. This graphic context encapsulates many painting methods. This is a built-in html5 object.
17. var context = canvas. getContext ('2d ');
18. // set the context style of the current image. The night is the current color used to draw the image. In addition, there are some other styles.
19. context. fillStyle = "# 0044FF ";
20. // fillXXX is used to fill the interior of the image. Here, fillRect indicates that the interior of the image is filled with the current color. The four parameters are the abscissa of the starting point, the vertical coordinate of the starting point, and the width and height respectively.
21. context. fillRect (0, 0, 400,300 );
22. // The color value can be in hexadecimal format or color name.
23. context. fillStyle = "red ";
24. context. strokeStyle = "blue ";
25. // used to set the Border Width
26. context. lineWidth = 1;
27. context. fillRect (50, 50, 100,100 );
28. // strokeXXX is used to describe the border (stroke) of the image. Here strokeRect indicates that it is used to draw the border of the rectangle just now.
29. context. strokeRect (50, 50, 100,100 );
30 .}
The result is:
1 ./**
2. * This file is confidential by Charles. Wang
3. * Copyright belongs to Charles. wang
4. * You can make contact with Charles. Wang (charles_wang888@126.com)
5 .*/
6.
7. function drawPath (id ){
8.
9. var canvas = document. getElementById (id );
10. if (canvas = null)
11. return false;
12.
13. // get the canvas object and context object first
14. var context = canvas. getContext ("2d ");
15. // draw the basemap of the canvas first
16. context. fillStyle = "# EEEEEF ";
17. context. fillRect (0, 0, 400,300 );
18.
19. // draw 10 circles with loops
20. var n = 0;
21. for (var I = 0; I <10; I ++ ){
22. // start to create a path. To draw a circle, the circle is essentially a path. Here, I want to draw a path. This is the starting point.
23. context. beginPath ();
24. // draw an arcade because the circle is a special arch.
25. // The six parameters are the abscissa of the starting point, the vertical coordinate of the starting point, the radius of the circle, the starting radians, And the ending radians (2PI is exactly 360 degrees). Are they clockwise?
26. context. arc (I * 25, I * 25, I * 10, 0, Math. PI * 2, true );
27. // close the path
28. context. closePath ();
29. context. fillStyle = "rgba (0.25, 0 )";
30. // fill in the circle just drawn
31. context. fill ();
32 .}
33 .}
The result is:
Example 3: draw a straight line and combine a complex image with a straight line
1 ./**
2. * This file is confidential by Charles. Wang
3. * Copyright belongs to Charles. wang
4. * You can make contact with Charles. Wang (charles_wang888@126.com)
5 .*/
6.
7. function drawLine (id ){
8.
9. var canvas = document. getElementById (id );
10. if (canvas = null)
11. return false;
12. var context = canvas. getContext ('2d ');
13. context. fillStyle = "# FF00FF ";
14. context. fillRect (0, 0, 400,300 );
15.
16. var n = 0;
17. var dx = 150;
18. var dy = 150;
19. var s = 100;
20. context. beginPath ();
21. context. fillStyle = 'rgb (100,255,100 )';
22. context. strokeStyle = 'rgb (100 )';
23. var x = Math. sin (0 );
24. var y = Math. cos (0 );
25. var dig = Math. PI/15*11;
26. for (var I = 0; I <30; I ++ ){
27. var x = Math. sin (I * dig );
28. var y = Math. cos (I * dig );
29. // use the trigonometric function to calculate the vertex
30. context. lineTo (dx + x * s, dy + y * s );
31 .}
32. context. closePath ();
33. context. fill ();
34. context. stroke ();
35 .}
The result is:
Example 4: Linear Gradient
1 ./**
2. * This file is confidential by Charles. Wang
3. * Copyright belongs to Charles. wang
4. * You can make contact with Charles. Wang (charles_wang888@126.com)
5 .*/
6.
7. // gradient is used for filling. It refers to the gradual transition from a certain color to another color when filling the image.
8. // linear gradient refers to the gradient between a line segment. The color of each point on the line segment also changes as the displacement value changes from the starting point.
9. function drawLinearGradient (id ){
10.
11. var canvas = document. getElementById (id );
12. if (canvas = null)
13. return false;
14.
15. // we need to draw the basemap first. This time, our basemap also uses a gradient.
16. var context = canvas. getContext ('2d ');
17. // The first gradient for the basemap. It calls createlinearGradient to create a gradient.
18. // The four parameters are the abscissa of the starting point, the ordinate of the starting point, the abscissa of the ending point, and the ordinate of the ending point, respectively. Therefore, in this example, from (0, 0) to (0,300 ), so it is a vertical downward gradient www.2cto.com
19. var gradient1 = context. createLinearGradient (0,300 );
20. // addColorStop can set the gradient color. The first parameter indicates the offset (0-1) and the Second parameter indicates the color.
21. // Therefore, we define a gradient from yellow to blue.
22. gradient1.addColorStop (0, 'rgb (255,255, 0 )');
23. gradient1.addColorStop (1, 'rgb (0,255,255 )');
24. // associate the context object with the current gradient settings as the fill Style
25. context. fillStyle = gradient1;
26. // use our defined gradient to draw the basemap
27. context. fillRect (0, 0, 400,300 );
28.
29. var n = 0;
30. // This time we will draw a set of circles. We define a gradient from (0, 0) to (, 0), that is, a gradient from left to right in the horizontal direction.
31. var gradient2 = context. createLinearGradient );
32. // set the starting color and ending color of the gradient.
33. gradient2.addColorStop (0, 'rgba (255, 0.5 ');
34. gradient2.addColorStop (1, 'rgba (255,0, 0, 0.5 )');
35. // draw a circle cyclically and fill it with gradient.
36. for (var I = 0; I <10; I ++ ){
37. context. beginPath ();
38. context. fillStyle = gradient2;
39. context. arc (I * 25, I * 25, I * 10, 0, Math. PI * 2, true );
40. context. closePath ();
41. context. fill ();
42 .}
43 .}
The result is:
Example 5: basic graph transformation (Pan, zoom, rotate)
1 ./**
2. * This file is confidential by Charles. Wang
3. * Copyright belongs to Charles. wang
4. * You can make contact with Charles. Wang (charles_wang888@126.com)
5 .*/
6.
7.
8. // This function is used to demonstrate some common coordinate transformations.
9. // common coordinate transformations include translation, scaling, and rotation.
10. function drawTransformShape (id ){
11.
12. var canvas = document. getElementById (id );
13. if (canvas = null)
14. return false;
15. // basemap
16. var context = canvas. getContext ('2d ');
17. context. fillStyle = "# FF00FF ";
18. context. fillRect (0, 0, 400,300 );
19.
20. // move the origin of the coordinate axis, because 200 is translated to the right and 50 is moved down, so the horizontal direction is centered.
21. context. translate (200,50 );
22.
23. // you can draw a series of pentagram in a loop.
24. for (var I = 0; I <50; I ++ ){
25. // move the origin of each coordinate axis to the lower right by 25 pixels
26. context. translate (25, 25 );
27. // and scale to 0.95 times each time
28. context. scale (0.95, 0.95 );
29. // then rotate the image, with each rotation plus 18 degrees (that is, clockwise)
30. context. rotate (Math. PI/10 );
31. // then draw a star in the current position
32. create5star (context );
33. // and fill in the current pentagram
34. context. fill ();
35 .}
36.
37 .}
38.
39.
40. // This function is used to draw a star
41. function create5star (context ){
42. var n = 0;
43. var dx = 100;
44. var dy = 0;
45. var s = 50;
46. // create a path
47. context. beginPath ();
48. context. fillStyle = "rgba (255,0, 0, 0.5 )";
49. var x = Math. sin (0 );
50. var y = Math. cos (0 );
51. var dig = Math. PI/5*4;
52. // draw five edges of a pentagram
53. for (var I = 0; I <5; I ++ ){
54. var x = Math. sin (I * dig );
55. var y = Math. cos (I * dig );
56. context. lineTo (dx + x * s, dy + y * s );
57 .}
58. context. closePath ();
59 .}
60.
61.
The result is:
From consortium of parallel lines
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
