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>