千盼万盼的国庆长假终于到了，手机前的你们今天玩的开心吗，作为一名热爱钻研技术的程序员，今天让我们用一种特殊的方式祝我们伟大的祖国68周岁生日快乐吧。当然不会是alert一下国庆快乐啦~~
国庆快乐
在这我还是要推荐下我自己的前端学习群：733581373，不管你是小白还是大牛，小编我都挺欢迎，不定期分享干货，包括我自己整理的一份2018最新的前端资料和零基础入门教程，欢迎初学和进阶中的小伙
首先来一个简单一点的，使用纯css绘制一面中国国旗
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body { text-align:center;}
*{ margin:0; padding:0; border:0;}
#flag { width:600px; text-align:left; position:absolute; top:50%; left:50%; margin-left:-300px; margin-top:-200px;height:400px; background-color:#FF0000; color:#FFFF00;}
div { font-size:45px;}
.bigStar { float:left; height:340px; width:140px; display:inline; font-size:120px; margin-top:60px; margin-left:25px;}
.starBox { float:left; margin-top:5px; margin-left:-10px;}
.star1 { padding-top:20px;}
.star2 , .star3 { padding-left:50px;}
.star3 { margin-top:7px;}
.star1 ,.star2 ,.star3 ,.star4 { margin-left:10px;}
.star1 { margin-top:10px;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>国庆快乐！祝各位阅读本文章的小伙伴都能开开心心~~</title>
</head>
<body>
<div id="flag">
<div class="bigStar">★</div>
<div class="starBox">
<div class="star1">★</div>
<div class="star2">★</div>
<div class="star3">★</div>
<div class="star4">★</div>
</div>
</div>
</body>
</html>
使用RUNJS的运行效果图如下
国庆快乐！
使用htlm5 canvas 以及 javascript绘制一面国旗
<html>
<head>
<script>
var col=new Array("red","brown");
var ticker=0;
var step=0;
function drawBackground(){
var g=document.getElementById("background").getContext("2d");
var grd=g.createLinearGradient(-560+ticker, 0, 1400+ticker,0);
for (var i=0; i<10; i++)
grd.addColorStop(i/10,col[(i + step)%col.length]);
ticker=ticker+10;
if (ticker>=196){
ticker=0;
step++;
}
g.fillStyle=grd;
g.fillRect(0,0,1600,700);
}
function preperation(){
setInterval('drawBackground()',100);
}
</script>
<style type="text/css">
#myCanvas{
z-index:2;
position:absolute; left:0px; top:-5px;
}
#background{
z-index:1;
position:absolute;
left:0px;
top:0px;
}
</style>
</head>
<body onLoad="preperation()">
<canvas id="myCanvas" width="900" height="600" >
Your browser does not support the HTML5 canvas tag.
</canvas>
<canvas id="background" width="1600" height="700" ></canvas>
<script>
var x=new Array(0,12,54,18,28,0,-28,-18,-54,-12,0); //五角星样品坐标xx数组
var y=new Array(-53,-17,-17,1,45,19,45,1,-17,-17,-53); //五角星样品坐标y数组
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d"); //获得画笔
//样品数组x轴坐标 a , 和y轴坐标 b
//指定位置[locationX,locationY]
//真实五角星的大小，与样品五角星尺寸之比 f
//五角星画完后，旋转的角度 rotation
function star(a,b,locationX,locationY,f,rotation){
ctx.save();//记录画图（画笔）的初始环境
ctx.translate(locationX,locationY);
ctx.rotate(rotation*Math.PI/180.0);
ctx.beginPath();
ctx.moveTo(Math.round(a[0]*f),Math.round(b[0]*f));
for (var i=1;i<a.length;i++)
ctx.lineTo(Math.round(a[i]*f),Math.round(b[i]*f));
ctx.closePath();
ctx.fillStyle="yellow";
ctx.fill();
ctx.restore();//还原画图（画笔）的初始环境
}
star(x,y,165,165,1.4,0);//画大五角星
star(x,y,301,65,0.5,30);//画小五角星
star(x,y,362,126,0.5,-30);//画小五角星
star(x,y,359,216,0.5,0);//画小五角星
star(x,y,301,273,0.5,30);//画小五角星
</script>
</body>
</html>
RUNJS的绘制效果图如下：
国庆快乐
据说看完文章加关注的小伙伴颜值都很高哦~
最后，如果有想一起学习JavaScript的可以来一下我的前端群733581373，基本上头条里的好友都会在里面交流，分享一些学习的方法和需要注意的小细节，每天也会准时的讲一些JavaScript的炫酷特效，游戏，插件封装，设计模式等等！
如果想看到更加系统的文章和学习方法经验可以关注的微信号：‘web前端技术圈’或者‘webxh6’关注后回复‘2018’可以领取一套完整的学习视频