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

128kj

浏览: 601518 次
来自: ...

最近访客更多访客>>

hcmfys

caizi12

sdtvyyb_007

hanqunfeng

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML5 动画游戏
javascript

html5 html javascript

美防长来了，不希望中国与美国在未来开战，HTML5 画个星条旗（美国国旗)祈祷。

代码：
<!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>
演示及源码下载：http://www.108js.com/article/article7/70180.html?id=921

附星条旗的画法：