canvas之最美夜空 beta0.01
代码如下：
<!DOCTYPE html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">0
*{margin: 0;padding: 0;}
canvas{ background: #000000;}
</style>
<body>
<canvas id="canvas" height="600" width="1000"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var cxt = canvas.getContext("2d");
for(i=0;i<30;i++){
//生成中心坐标
var x =Math.floor(Math.random() * 1000);
var y =Math.floor(Math.random() * 600);
//星星大小
var rand = Math.floor(Math.random() * 8)+2;
//起点坐标即星星上方坐标
cxt.beginPath();
cxt.fillStyle = "white";
cxt.strokeStyle = "white";
// 绘制星星
cxt.moveTo(x,y+rand * 2);
cxt.lineTo(x+rand/4,y+rand/4);
cxt.lineTo(x+rand*1.5,y);
cxt.lineTo(x+rand/4,y-rand/4);
cxt.lineTo(x,y-rand * 2);
cxt.lineTo(x-rand/4,y-rand/4);
cxt.lineTo(x-rand*1.5,y);
cxt.lineTo(x-rand/4,y+rand/4);
cxt.lineTo(x,y+rand * 2);
cxt.closePath();
cxt.stroke();
cxt.fill();
}
</script>
</body>
</html>
效果图：
