# Html5 作图五星红旗

www.MyException.Cn  网友分享于：2013-12-05  浏览：0次
Html5 绘制五星红旗

Html5+JavaScript 在Canvas上绘制五星红旗，具体思路如下图所示：

``` 1 <script type="text/javascript">
2
3         //绘制五角星，其中一点垂直向上，相隔的点相连，即可绘制。
5             var aX = starCenterX;
6             var aY = starCenterY - starRadius;
7             var bX = starCenterX - Math.cos(18 * Math.PI / 180) * starRadius;
8             var bY = starCenterY - Math.sin(18 * Math.PI / 180) * starRadius;
9             var cX = starCenterX - Math.cos(54 * Math.PI / 180) * starRadius;
10             var cY = starCenterY + Math.sin(54 * Math.PI / 180) * starRadius;
11             var dX = starCenterX + Math.cos(54 * Math.PI / 180) * starRadius;
12             var dY = starCenterY + Math.sin(54 * Math.PI / 180) * starRadius;
13             var eX = starCenterX + Math.cos(18 * Math.PI / 180) * starRadius;
14             var eY = starCenterY - Math.sin(18 * Math.PI / 180) * starRadius;
15             ctx.beginPath();
16             ctx.fillStyle = "yellow";
17             ctx.moveTo(aX, aY);
18             ctx.lineTo(cX, cY);
19             ctx.lineTo(eX, eY);
20             ctx.lineTo(bX, bY);
21             ctx.lineTo(dX, dY);
22             ctx.lineTo(aX, aY);
23             ctx.fill();
24             ctx.closePath();
25         }
26
27         window.onload = function () {
28             var c = document.getElementById("myCanvas");
29             var ctx = c.getContext("2d");
30             ctx.clearRect(0, 0, c.width, c.height);
31             var width = 300*1.5;
32             var height = 200*1.5;
33             var sX = 50; //其实坐标
34             var sY = 50; //其实坐标
35             var step = 10*1.5;
36             //绘制矩形
37             ctx.beginPath();
38             ctx.lineWidth = 1;
39             ctx.fillStyle = "red";
40             ctx.fillRect(sX, sY, width, height);
41             ctx.closePath();
42             //绘制大五角星
43             var bigStarCenterX = sX + 5 * step;
44             var bigStarCenterY = sY + 5 * step;
45             var bigStarRadius = (height * 3 / 10) / 2; //外接圆直径为旗高3/10，半径要再除以2
47             //绘制小五角星
48             var smallStarRadius = (height * 1 / 10) / 2; //外接圆直径为旗高1/10，半径要再除以2
49
50             var smallStarCenterX_1 = sX + 10 * step;
51             var smallStarCenterY_1 = sY + 2 * step;
53             var smallStarCenterX_2 = sX + 12 * step;
54             var smallStarCenterY_2 = sY + 4 * step;
56             var smallStarCenterX_3 = sX + 12 * step;
57             var smallStarCenterY_3 = sY + 7 * step;