HTML5画出五星红旗

作者：编程知识库发布：2016-12-15 分类：css3 html5 阅读：871次

源码：

<!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制作简约唯美登录注册页面

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

2016-12-16 495次前端开发HTML5本地存储总结
前端开发中，我们经常接触到浏览器，谈到浏览器，自然会想到有些页面之间是怎么共享数据的，怎么保存数据的，今天就来解决这个用户痛点。SessionStorage, LocalStorage, Cookie这三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对！。区别在于前两者...
2016-12-15 871次HTML5画出五星红旗
源码： <!DOCTYPE html> <html> <head> <meta charset=”gbk”> <title>中国标准国旗</title> </head> <body> <canvas id=”canvas” width=”600″ height=”400″&g...
2015-04-30 3,415次css3实现图片比例缩放，左右垂直居中显示
实现图片在指定容器内等比例缩放，并控制中上下左右居中，以前可以通过javascript 加css2 的办法来控制。随着css3的普及，现在介绍一种单纯通过css来进行控制。 <!html> <head> <meta charset="utf-8"> <title> css3 图片等...
2014-11-28 4,335次css3几何图形、多边图形shape研究
前言估计大家在日常工作中都会用到css形状，但是目前天朝中使用到最多的估计就是圆（circle）、椭圆（ellipse）、各种三角形形状，但是你肯定很少看见过用几何图形或者多边图形。假如你不懂什么叫做几何图形，那么请前往百度百科，就算是我们用:after :before 这些...

HTML5画出五星红旗

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

2016-12-16 495次前端开发HTML5本地存储总结

2016-12-15 871次HTML5画出五星红旗

2015-04-30 3,415次css3实现图片比例缩放，左右垂直居中显示

2014-11-28 4,335次css3几何图形、多边图形shape研究

大家正在看

推荐阅读

全部分类

本月热门