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>
效果图: