HTML5画出五星红旗

作者：前端开发发布：2016-12-15 分类：css3 html5 阅读：265次

源码：

<!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前端开发HTML5本地存储总结
前端开发中，我们经常接触到浏览器，谈到浏览器，自然会想到有些页面之间是怎么共享数据的，怎么保存数据的，今天就来解决这个用户痛点。SessionStorage, LocalStorage, Cookie这...
2015-04-30css3实现图片比例缩放，左右垂直居中显示
实现图片在指定容器内等比例缩放，并控制中上下左右居中，以前可以通过javascript 加css2 的办法来控制。随着css3的普及，现在介绍一种单纯通过css来进行控制。 <!html> ...
2014-11-28css3几何图形、多边图形shape研究
前言估计大家在日常工作中都会用到css形状，但是目前天朝中使用到最多的估计就是圆（circle）、椭圆（ellipse）、各种三角形形状，但是你肯定很少看见过用几何图形或者多边图形。...
2014-11-26css3实现渐变的iPhone滑动解锁效果
该效果的主要实现思路是给文字添加渐变的背景，然后对背景进行裁剪，按文字裁剪（目前只有webkit内核浏览器支持该属性），最后给背景添加动画，即改变背景的位置，背景动画效果如...
2014-11-25css3文字高亮发光特效
HTML代码 <span class="shiny"><span class="inner-shiny">Shiny</span> </span> CSS代码 body { background: #111; } .s...
2014-11-20IE浏览器让ie支持CSS3的方法
再也不用为迁就低版本IE而额外写代码了，直接按照现代浏览器标准写，最后加入selectivizr即可。一个字，爽！大神们常说：PC端写css3，优雅降级才是王道。但是鉴于草根前端er们在...
2014-11-17纯css3 loading动画加载效果
在线演示源码下载 html代码 <div class="inner"> <div class="load-container load1"> <div class="loader">Loadi...
2014-11-17css3制作火影忍着写轮眼开眼及进化过程
今天是火影忍者（漫画）宣告完结的日子，也是我首发的第一个随笔。看过火影的朋友都知道，写轮眼是什么，这里就不多说了。下面就直接展示整个效果，上张图，先睹为快：目前已经...
2014-11-14手机浏览器全屏代码,css3+html5+js控制手机浏览器全屏
在越来越真实的web应用程序中,JavaScript也变得越来越给力. FullScreen API 是一个新的JavaScript API,简单而又强大. FullScreen 让我们可以通过编程的方式来向用户请求全屏显示,...
2014-04-28css仿ios7背景图片模糊效果,css3毛玻璃模糊效果
前段时间，iOS7不是瓜未熟就落地了嘛，然后捡瓜的人很多，然后国内外开始了各种探讨，从界面到动画，从兼容到实现等。其中，“毛玻璃”一次梆梆出世，一些爱折腾的弄潮人就可以琢磨...

HTML5画出五星红旗

为您推荐

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

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

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

2014-11-28css3几何图形、多边图形shape研究

2014-11-26css3实现渐变的iPhone滑动解锁效果

2014-11-25css3文字高亮发光特效

2014-11-20IE浏览器让ie支持CSS3的方法

2014-11-17纯css3 loading动画加载效果

2014-11-17css3制作火影忍着写轮眼开眼及进化过程

2014-11-14手机浏览器全屏代码,css3+html5+js控制手机浏览器全屏

2014-04-28css仿ios7背景图片模糊效果,css3毛玻璃模糊效果

猜你喜欢

大家正在看

阅读排行榜

热门标签

本月热门