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

美防长来了，不希望中国与美国在未来开战，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]

美防长来了，HTML5 画个星条旗（美国国旗)相关推荐

用python画美国国旗
最近我们老师让我们用 python 中的海龟画图模块来画一个美国国旗,一开始就在网上查了一下,我在网上找了很久只找到一个方法,开始没有注意就把网上的那个代码复制下来运行了一遍,突然发现那个代码有一点问 ...
html5制作线路图,HTML5画一个简单呢好看的电路图
画图API的应用,线,圆等最近特别忙,承蒙大伙关照,自己折腾着做了个HTML5画电路图何问起 canvas画简单电路图 by 何问起 [相关推荐] 1. 特别推荐:"php程序员工具箱& ...
利用html5画出五角星画出星空
利用html5画出五角星 (在慕课网学习<canvas>标签后代码总结) 五角星的格定点坐标该如何定位?原理图如下: 源代码: <!DOCTYPE HTML> <html ...
运用html画一个三角形,利用css或html5画出一个三角形的方法
利用css或html5画出一个三角形的方法发布时间:2020-09-14 14:49:22 来源:亿速云阅读:83 作者:小新这篇文章主要介绍利用css或html5画出一个三角形的方法,文中介绍 ...
PHP画好看的图,HTML5画一个简单呢好看的电路图
画图API的应用,线,圆等最近特别忙,承蒙大伙关照,自己折腾着做了个HTML5画电路图何问起 var canvas = document.getElementById("canHewen ...
html5之太阳地球月球,使用html5画出地球月球和太阳之间的环绕关系
本文主要是描述了使用html5画出地球月球和太阳之间的环绕关系,其实他们比较简单,主要是通过旋转来控制各个之间的环绕关系!~ 输入代码,里面有注释: ------------------------- ...
html原理图,HTML5画电路图
下面是编程之家 jb51.cc 通过网络收集整理的代码片段. 编程之家小编现在分享给大家,也给大家做个参考. 画图API的应用,线,圆等 http://t.cn/RGfhSlO 何问起 var can ...
HTML5 画扇形图
求评论啊!!!! 也写了一些东西..咋就没人评论一下的呢. .... HTML5 画扇形图最近有个需求做了个平衡论应用因为是需要打包成 android 和 ios的用了phonegap ...
美少女的小裙子怎么画？怎样才能画好美少女的小裙子？
美少女的小裙子怎么画?怎样才能画好美少女的小裙子?画好美少女的小裙子有哪些技巧?想必这些问题都是初学者们比较伤脑筋的问题,那么到底怎样才能画好美少女的小裙子呢?今天灵猫课堂老师就在网络上收集整理了关于 ...

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

美防长来了，HTML5 画个星条旗（美国国旗)相关推荐

最新文章

热门文章