美防长来了，HTML5 画个星条旗（美国国旗)

最新推荐文章于 2022-04-16 10:57:10 发布

iteye_8466

最新推荐文章于 2022-04-16 10:57:10 发布

阅读量583

点赞数

分类专栏： HTML5 动画游戏 javascript 文章标签： html5 html javascript ViewUI

HTML5 动画游戏同时被 2 个专栏收录

32 篇文章

订阅专栏

javascript

28 篇文章

订阅专栏

美防长来了，不希望中国与美国在未来开战，HTML5 画个星条旗（美国国旗)祈祷。
[img]http://dl2.iteye.com/upload/attachment/0095/8174/89e635e6-98b7-3d0c-94b1-24156fdf1c62.gif[/img]
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title>美国国旗</title>
</head>
<body>
<canvas id="canvas" width="741" height="390">你的浏览器不支持HTML5</canvas>
<script>

 var canvas = document.getElementById("canvas");
 var context = canvas.getContext('2d');
 var height=canvas.height;
 var width=1.9*height;
 var i;
   for ( i = 0; i < 13; i++)
   {
    if (i % 2 == 0)
    {
      context.fillStyle="rgb(204, 0, 0)";
     }else{
       context.fillStyle = "rgb(255, 255, 255)";
      }
     context.fillRect(0, 30 * i, width, 30);
    }

    context.fillStyle="rgb(0, 0, 102)";
    context.fillRect(0, 0, width*2/5, 210);

     var sx = 0;
     var sy = 0;
     for ( i = 0; i < 9; i++)//九排星星
     {
       sy = (i + 1) * 0.0538*height;
       if (i % 2 == 0)
       {
          sx =-0.0633*height;
          for (var j = 0; j < 6; j++)
          {
             sx = sx + 0.0633*2*height;
             create5star(context,sx,sy,0.0616*height/2,"#fff",0);
           }
       }
       else
       {
         sx= 0;
         for (var j = 0; j < 5; j++)
         {
           sx = sx + 0.0633*2*height;
           create5star(context,sx,sy,0.0616*height/2,"#fff",0);
          }
     }
  }

  //绘制五角星
  /**
   * 创建一个五角星形状. 该五角星的中心坐标为(sx,sy),中心到顶点的距离为radius,rotate=0时一个顶点在对称轴上
   * rotate:绕对称轴旋转rotate弧度
   */

  function create5star(context,sx,sy,radius,color,rotato){
   context.save();
   context.fillStyle=color;
   context.translate(sx,sy);//移动坐标原点
   context.rotate(Math.PI+rotato);//旋转
   context.beginPath();//创建路径
   var x = Math.sin(0);
   var y= Math.cos(0);
   var dig = Math.PI/5 *4;
   for(var i = 0;i<5;i++){//画五角星的五条边
     var x = Math.sin(i*dig);
     var y = Math.cos(i*dig);
     context.lineTo(x*radius,y*radius);
   } 
   context.closePath();
   context.stroke();
   context.fill();
   context.restore();
 }

</script>
</body>
</html>
演示及源码下载：[url]http://www.108js.com/article/article7/70180.html?id=921[/url]

附星条旗的画法：
[img]http://dl2.iteye.com/upload/attachment/0095/8176/98d278e7-5263-35b1-8541-546e4077498f.gif[/img]

[img]http://dl2.iteye.com/upload/attachment/0095/8172/50e5fe10-68a2-3c7f-bb51-777cd7c8bd51.gif[/img]