HTML5画出五星红旗

作者：编程知识库发布：2016-12-15 分类：Css3 Html5 阅读：584次

源码：

<!DOCTYPE html>

<html>

<head>

<title>中国标准国旗</title>

</head>

<body>

/**

使用HTML5绘制标准五星红旗

*/

var canvas = document.getElementById(“canvas”);

var context = canvas.getContext(‘2d’);

var width=canvas.width;

var height=width*2/3;

var w=width/30;//小网格的宽

context.fillStyle=”red”;

context.fillRect(0,0,width,height);

var maxR = 0.15, minR = 0.05;//

var maxX = 0.25, maxY = 0.25;//大五星的位置

var minX = [0.50, 0.60, 0.60, 0.50];

var minY = [0.10, 0.20, 0.35, 0.45];

// 画大☆

var ox = height * maxX, oy = height * maxY;

create5star(context,ox,oy,height * maxR,”#ff0″,0);//绘制五角星

// 画小★

for (var idx = 0; idx < 4; idx++) {

var sx = minX[idx] * height, sy = minY[idx] * height;

var theta = Math.atan((oy – sy)/(ox – sx));

create5star(context,sx, sy, height * minR, “#ff0”,-Math.PI/2+theta);

}

//辅助线

context.moveTo(0,height/2)

context.lineTo(width,height/2);

context.stroke();

context.moveTo(width/2,0);

context.lineTo(width/2,height);

context.stroke();

//画网格，竖线

for(var j=0;j< 15;j++){

context.moveTo(j*w,0);

context.lineTo(j*w,height/2);

context.stroke();

}

//画网格，横线

for(var j=0;j< 10;j++){

context.moveTo(0,j*w);

context.lineTo(width/2,j*w);

context.stroke();

}

//画大圆

context.beginPath();

context.arc(ox,oy,maxR*height,0,Math.PI*2,false);

context.closePath();

context.stroke();

// 画小圆

for (var idx = 0; idx < 4; idx++) {

context.beginPath();

var sx = minX[idx] * height, sy = minY[idx] * height;

context.arc(sx, sy, height * minR,0,Math.PI*2,false);

context.closePath();

context.stroke();

}

//大圆中心与小圆中心连接线

for (var idx = 0; idx < 4; idx++) {

context.moveTo(ox,oy);

var sx = minX[idx] * height, sy = minY[idx] * height;

context.lineTo(sx, sy);

context.stroke();

}

//绘制五角星

/**

* 创建一个五角星形状. 该五角星的中心坐标为(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>

转载请注明：HTML5画出五星红旗 - 编程知识库

该文章由编程知识库发于2016年12月15日发表在Css3 Html5分类下，你可以至底部留下评论。

原创文章转载请注明: HTML5画出五星红旗 | 编程知识库

上一篇：js去除重复并统计数量方法

下一篇：Bootstrap制作简约唯美登录注册页面

您可能还会对这些文章感兴趣

雷军22年前写的程序代码保准你没见过！

作为小米科技的创始人、董事长和首席执行官，雷军的名字如雷贯耳。上午W3Cschool发布了一篇“刘强东的代码水平如何”(有兴趣的可以点击右上角关注我们)的文章，有网友在下面回复“代码只服雷军”。这个回复吸引了W3Cschool的注...
只会用jQuery前端到底low不low?

如果你之前没有看过我的《前端工程师如何月薪过4万》这里建议大家仔细读读一下，因为里面有整个前端工程师成长的技术路线图和我的故事。同时很多小伙伴问我的学历后来没再考考么，我是考了成考的北京航空航天大学，也马上快...
UED原型设计工具Axure汉化版

Axure汉化版已经发布，版本号Axure 5.1.0.1699，下面是截图效果 Axure汉化版文件下载地址：Axure汉化补丁 Axure RP pro 5.1.0.1699 下载地址注册用户名：Axure 序列...
百度公共DNS无劫持IP 从此上网无阻

今天百度推出公共DNS服务，IP地址为180.76.76.76，号称拥有遍布全国的递归出口节点，可以做到更稳定，纯净无劫持等。 DNS在现有整个互联网基础架构中也扮演着流量”调度员”、”指引员”的角色。尽管已经有超过30年历史,DNS仍...
小伙打造网站媒体帝国月访问量4500万

　　BI中文站 6月7日报道艾默生·斯帕茨(Emerson Spartz)今年28岁，已婚，是Spartz Inc公司的首席执行官。Spartz Inc是一个网站媒体帝国，旗下的30多家网站专门发布有趣、励志和让人感到不可思议的文章和帖子，其分享量非常...

HTML5画出五星红旗

您可能还会对这些文章感兴趣

大家正在看

推荐阅读

全部分类

本月热门