//設置全局變量
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
);
怎樣調控星星的密度？
寫了一個小程序，怎樣調控星星的密度？
諸侯戲烽火
2016-11-30 20:24:02