美防长来了,不希望中国与美国在未来开战,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
附星条旗的画法:
- 大小: 42.8 KB
- 大小: 26.6 KB
- 大小: 16.1 KB
分享到:
相关推荐
星条旗PPT模板下载
星条旗博客类html前端模板,可建站,可二次开发,大站风格,比较简单,适合个人博客或者学生作业,内含1套模板.rar
星条旗主题####安装 apm install stars-and-stripes-theme-syntax#### Screenshots屏幕快照显示字体 ,字体大小14和行高1.2 ##### Javascript 所有函数都有灰色背景,这有助于在快速滚动代码时发现匿名函数。...
当前版本有当前的日本国旗、旧式日本国旗、英国国旗和星条旗。 截图 变更日志 版本 0.4.0 更新许可证详细信息 版本 1.0.0 初始发行 谢谢 非常感谢: 艺术品的 执照 InJapan 在 MIT 许可下可用。 有关详细信息,...
《星条旗下的联邦民主制》教学 .docx
背后的主要动力星条旗是Web应用开发的Java只是太辛苦了! It seems like every existing framework requires gobs of configuration. Struts好像每一个现有的框架需要采空区的配置。 Struts的 is pretty feature-...
主要介绍了Android高级界面组件之拖动条和评星条的实现实例,需要的的朋友参考下
在windows10+vs2019+openGL3.0+Mali_OpenGL_ES_Emulator-v3.0.4-2-g8d905-Windows-64bit_unsigned使用模拟器,实现绘制星条旗,项目中包含完整的头文件,lib,dll完全 不需要任何配置就可以运行
对环境星进行批量波段组合与辐射定标,希望大家有用
用HTML5制作的ROM修补程序。 特征: 支持的格式: 入侵防御系统 UPS APS BPS RUP PPF 纸Mario星条(.mod) VCDiff(.xdelta) 可以打补丁并创建补丁 修补前显示ROM CRC32,MD5和SHA-1 可以在修补之前...
HJ1A星条带比较多,数据如若不经去条带处理会出现影像无法使用的情况,此程序专门针对HJ1A星进行条带去除,快捷方便!