HTML5 Canvas绘制五星红旗_html5教程技巧

Canvas 绘图 API 都没有定义在 元素本身上，而是定义在通过画布的 getContext() 方法获得的一个“绘图环境”对象上。

Canvas API 也使用了路径的表示法。但是，路径由一系列的方法调用来定义，而不是描述为字母和数字的字符串，比如调用 beginPath() 和 arc() 方法。

一旦定义了路径，其他的方法，如 fill()，都是对此路径操作。绘图环境的各种属性，比如 fillStyle，说明了这些操作如何使用。

使用Canvas画中国国旗，代码：

XML/HTML Code复制内容到剪贴板

1. /span>>
2. html>
3. head>
4. meta charset="UTF-8">
5. title>中国标准国旗title>
6. head>
7. body>
8. canvas id="canvas" width="600" height="400">canvas>
10. script type="text/javascript">
11. // 使用HTML5绘制标准五星红旗
12. var canvas = document.getElementById("canvas");
13. var context = canvas.getContext('2d');
14. var width = canvas.width;
15. var height = width * 2 / 3;
16. var w = width / 30;//小网格的宽
17. context.fillStyle = "red";
18. context.fillRect(0, 0, width, height);
19. var maxR = 0.15, minR = 0.05;//
20. var maxX = 0.25, maxY = 0.25;//大五星的位置
21. var minX = [0.50, 0.60, 0.60, 0.50];
22. var minY = [0.10, 0.20, 0.35, 0.45];
23. // 画大 ☆
24. var ox = height * maxX, oy = height * maxY;
25. create5star(context, ox, oy, height * maxR, "#ff0", 0);//绘制五角星
26. // 画小 ★
27. for (var idx = 0; idx 4; idx++) {
28. var sx = minX[idx] * height, sy = minY[idx] * height;
29. var theta = Math.atan((oy - sy) / (ox - sx));
30. create5star(context, sx, sy, height * minR, "#ff0", -Math.PI / 2 + theta);
31. }
32. //辅助线
33. context.moveTo(0, height / 2)
34. context.lineTo(width, height / 2);
35. context.stroke();
36. context.moveTo(width / 2, 0);
37. context.lineTo(width / 2, height);
38. context.stroke();
39. //画网格，竖线
40. for (var j = 0; j 15; j++) {
41. context.moveTo(j * w, 0);
42. context.lineTo(j * w, height / 2);
43. context.stroke();
44. }
45. //画网格，横线
46. for (var j = 0; j 10; j++) {
47. context.moveTo(0, j * w);
48. context.lineTo(width / 2, j * w);
49. context.stroke();
50. }
51. //画大圆
52. context.beginPath();
53. context.arc(ox, oy, maxR * height, 0, Math.PI * 2, false);
54. context.closePath();
55. context.stroke();
56. // 画小圆
57. for (var idx = 0; idx 4; idx++) {
58. context.beginPath();
59. var sx = minX[idx] * height, sy = minY[idx] * height;
60. context.arc(sx, sy, height * minR, 0, Math.PI * 2, false);
61. context.closePath();
62. context.stroke();
63. }
64. //大圆中心与小圆中心连接线
65. for (var idx = 0; idx 4; idx++) {
66. context.moveTo(ox, oy);
67. var sx = minX[idx] * height, sy = minY[idx] * height;
68. context.lineTo(sx, sy);
69. context.stroke();
70. }
71. //绘制五角星
72. /**
73. * 创建一个五角星形状. 该五角星的中心坐标为(sx,sy),中心到顶点的距离为radius,rotate=0时一个顶点在对称轴上
74. * rotate:绕对称轴旋转rotate弧度
75. */
76. function create5star(context, sx, sy, radius, color, rotato){
77. context.save();
78. context.fillStyle = color;
79. context.translate(sx, sy);//移动坐标原点
80. context.rotate(Math.PI + rotato);//旋转
81. context.beginPath();//创建路径
82. var x = Math.sin(0);
83. var y = Math.cos(0);
84. var dig = Math.PI / 5 * 4;
85. for (var i = 0; i 5; i++) {//画五角星的五条边
86. var x = Math.sin(i * dig);
87. var y = Math.cos(i * dig);
88. context.lineTo(x * radius, y * radius);
89. }
90. context.closePath();
91. context.stroke();
92. context.fill();
93. context.restore();
94. }
95. script>
96. body>
97. html>

以上就是本文的全部内容，希望对大家的学习有所帮助。