用canvas绘制标准的五星红旗
作者：互联网
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style>
9 #flag{
10 width: 600px;
11 height: 400px;
12 background-color: #DE2910;
13 }
14 </style>
15 </head>
16 <body align="center">
17 <canvas id="flag" width=600 height="400"></canvas>
18 <script>
19 var flag=document.getElementById("flag");
20 var ctx=flag.getContext('2d');
21
22 function drawStar(x,y,r,deg){//xy中心坐标，r半径，deg旋转角度
23 ctx.beginPath();
24 ctx.translate(x,y);
25 ctx.rotate(deg*Math.PI/180);
26 var dit = Math.PI * 4 / 5;
27 var sin = Math.sin(0) * r;
28 var cos = Math.cos(0) * r;
29 ctx.moveTo(cos, sin);
30 for (var i = 0; i < 5; i++) {
31 var tempDit = dit * i;
32 sin = Math.sin(tempDit) * r;
33 cos = Math.cos(tempDit) * r;
34 ctx.lineTo(cos, sin);
35 }
36 ctx.closePath();
37 ctx.fillStyle = "#ffde00";
38 ctx.fill();
39 ctx.rotate(-deg*Math.PI/180);
40 ctx.translate(-x,-y);
41 }
42
43 drawStar(100,100,60,-18);
44 drawStar(200,40,20,0);
45 drawStar(240,80,20,27);
46 drawStar(240,140,20,-18);
47 drawStar(200,180,20,0);
48 </script>
49 </body>
50 </html>
标签：canvas,ctx,cos,五星红旗,drawStar,var,绘制,sin,Math 来源： https://www.cnblogs.com/Minstrel223/p/12111501.html