canvas绘制星空（起手篇）
无图不欢，先上图
<html>
<head>
<meta name="keywords" content="风舞红枫,前端技术,canvas"/>
<meta name="description" content="风舞红枫,前端技术,canvas,vue,react,node,个人博客"/>
<meta charset="UTF-8">
<title>星空示例title>
<link rel="icon" href="../image/icon2.ico">
<style>
*{margin:0;padding:0}
html,body{height:100%;background:rgb(0,0,51);}
canvas{display:block;position:absolute;}
style>
head>
<body>
<canvas>canvas>
<canvas>canvas>
<canvas>canvas>
body>
<script>
var canvas = document.getElementsByTagName('canvas')[0];
canvas.width = document.body.offsetWidth;
canvas.height = document.body.offsetHeight;
var context = canvas.getContext('2d');
var starArr = [];
for(var i = 0; i< rand(300,400);i++){
context.beginPath();
//圆心x坐标 圆心y坐标 圆的半径 透明度 透明度变化速度
starArr[i] = [rand(0,canvas.width),rand(0,canvas.height),rand(1,2),rand(0,10),rand(-2,2)];
context.fillStyle = 'rgba(255,255,255,'+starArr[i][3]/10+')';
//starArr.push([rand(0,canvas.width),rand(0,canvas.height),rand(1,3)]);
context.arc(starArr[i][0],starArr[i][1],starArr[i][2],0,2*Math.PI);
context.fill();
context.closePath();
}
setInterval(function(){
context.clearRect(0,0,canvas.width,canvas.height);
for(var j = 0;j<starArr.length;j++){
context.beginPath();
starArr[j][3] += starArr[j][4];
if(starArr[j][3] >= 10 || starArr[j][3] <= 0){
starArr[j][4] = -starArr[j][4];
if(starArr[j][3] >= 10){
starArr[j][3] == 10;
}
if(starArr[j][3] <= 0){
starArr[j][3] == 0;
}
}
context.fillStyle = 'rgba(255,255,255,'+starArr[j][3]/10+')';
context.arc(starArr[j][0],starArr[j][1],starArr[j][2],0,2*Math.PI);
context.fill();
context.closePath();
}
},300)
var canvas2 = document.getElementsByTagName('canvas')[1];
canvas2.width = document.body.offsetWidth;
canvas2.height = document.body.offsetHeight;
var context2 = canvas2.getContext('2d');
context2.beginPath();
var radial = context2.createRadialGradient(450,180,100,450,180,120);
radial.addColorStop(0,'rgba(255,255,255,0)');
radial.addColorStop(0.4,'rgba(255,255,255,0.4)'); // 颜色值 #FF0188 == rgba(255,1,136,1)
radial.addColorStop(0.5,'rgba(255,255,255,0.6)');
radial.addColorStop(0.7,'rgba(255,255,255,0.8)');
radial.addColorStop(1,'rgba(255,255,255,1)');
context2.fillStyle = radial;
context2.moveTo(370,120);
context2.bezierCurveTo(250,170,350,380,500,280);
context2.fill();
context2.closePath();
context2.beginPath();
context2.fillStyle = 'rgba(255,255,255,1)';
context2.moveTo(372,120);
context2.bezierCurveTo(300,170,400,330,502,280);
context2.globalCompositeOperation = "destination-out";
context2.fill();
context2.closePath();
var canvas3 = document.getElementsByTagName('canvas')[2];
canvas3.width = document.body.offsetWidth;
canvas3.height = document.body.offsetHeight;
var context3 = canvas3.getContext('2d');
var lx = [];
setInterval(function(){
context3.clearRect(0,0,canvas3.width,canvas3.height);
if(rand(-9,9) == 9){
var x = rand(20,canvas3.width);
if(x > canvas3.width - 20){
var y = rand(0,canvas3.height-20);
}else{
var y = 0;
}
lx.push([x,y,rand(1,3)]);
}
for(var x = 0;x<lx.length;x++){
context3.beginPath();
var linear = context3.createLinearGradient(lx[x][0],lx[x][1]+1,lx[x][0]+40,lx[x][1]-40);
linear.addColorStop(0,'rgba(255,255,255,1)');
linear.addColorStop(1,'rgba(255,255,255,0)');
context3.fillStyle = linear;
context3.moveTo(lx[x][0],lx[x][1]);
context3.lineTo(lx[x][0]+40,lx[x][1]-40);
context3.lineTo(lx[x][0]+40,lx[x][1]-39);
context3.lineTo(lx[x][0],lx[x][1]+1);
context3.fill();
context3.closePath();
context3.beginPath();
var radial = context3.createRadialGradient(lx[x][0],lx[x][1],1,lx[x][0],lx[x][1],3);
radial.addColorStop(0,'rgba(255,255,255,1)');
radial.addColorStop(1,'rgba(255,255,255,0)');
context3.fillStyle = radial;
context3.arc(lx[x][0],lx[x][1],3,0,2*Math.PI);
context3.fill();
context3.closePath();
lx[x][0] -= lx[x][2];
lx[x][1] += lx[x][2];
if(lx[x][1] > canvas3.height){
lx.splice(x,1);
x--;
}
}
},30)
//随机数
function rand(n,m){
return Math.floor(Math.random()*(m-n+1)+n);
}
script>
html>
canvas绘制星空（正篇）