用canvas绘制标准的五星红旗

攻城狮宇硕技术 2022年11月12日

0 收藏 656 点赞 4,111 浏览 961 个字

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
     <style>
         #flag{
             width: 600px;
             height: 400px;
             background-color: #DE2910;
         }
     </style>
 </head>
 <body align="center">
     <canvas id="flag" width=600 height="400"></canvas>
     <script>
         var flag=document.getElementById("flag");
         var ctx=flag.getContext('2d');         function drawStar(x,y,r,deg){//xy中心坐标，r半径，deg旋转角度
             ctx.beginPath();
             ctx.translate(x,y);
             ctx.rotate(deg*Math.PI/180);
             var dit = Math.PI * 4 / 5;
             var sin = Math.sin(0) * r;
             var cos = Math.cos(0) * r;
             ctx.moveTo(cos, sin);
             for (var i = 0; i < 5; i++) {
                 var tempDit = dit * i;
                 sin = Math.sin(tempDit) * r;
                 cos = Math.cos(tempDit) * r;
                 ctx.lineTo(cos, sin);
             }
             ctx.closePath();
             ctx.fillStyle = "#ffde00";
             ctx.fill();
             ctx.rotate(-deg*Math.PI/180);
             ctx.translate(-x,-y);
         }         drawStar(100,100,60,-18);
         drawStar(200,40,20,0);
         drawStar(240,80,20,27);
         drawStar(240,140,20,-18);
         drawStar(200,180,20,0);
     </script>
 </body>
 </html>