//设置全局变量
var height=1410;
var width=980;
//创建canvas环境及设置画布
var dom =document.getElementById('canvas');
var ctx=dom.getContext('2d');
canvas.height=height;
canvas.width=width;
//定义绘制黑色背景的函数
function Fill(){
ctx.fillStyle="rgba(0,5,4,1)";
ctx.fillRect(0,0,width,height);
ctx.fill();
}
//动部
var stars=[];
//动画
function update(){
for(i=0;i<stars.length;i++){
stars[i].x+=stars[i].v;
stars[i].y+=stars[i].v;
stars[i].v+=stars[i].g;
}
}
//为stars数组添加星星
function addstars(x,y,num){
if(stars.length<100){
var astar={
x:-Math.random()*width,
y:Math.random()*height/1.8-height/2,
g:0.5,
v:Math.random()*3,
}
stars.push(astar);
}}
//绘制流星
function drawLine(){
for(i=0;i<stars.length;i++){
ctx.beginPath();
ctx.strokeStyle="rgba(240,219,120,0.9)";
ctx.lineWidth=stars[i].width;
ctx.moveTo(stars[i].x,stars[i].y);
ctx.lineTo(stars[i].x-40,stars[i].y-40);
ctx.stroke();
}}
//绘制
function draw(){
Fill();
drawLine();
}
setInterval(
function(){
addstars();
draw();
update();
}
,
50
);
怎样调控星星的密度?
添加回答
举报
0/150
提交
取消