一.原理
星星之所以闪烁：采用的随机的抽取的星星发生缩放，从大足见变没有。
二.代码
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title></head><body bgcolor="#000"><canvas id="canvas" style="display:block;margin:50px auto;">当前浏览器不支持Canvas，请更换浏览器后再试</canvas><script type="text/javascript">var canvas = document.getElementById("canvas");var cxt=canvas.getContext('2d');canvas.width =1920;canvas.height =800;starArr=[]; //2.多个星星对象for(var i=0;i<150;i++){var starObj={radius1:10+5*Math.random(),radius2:2+4*Math.random(),x:30+(canvas.width-60)*Math.random(),y:30+(canvas.height-60)*Math.random(),num:4,angle:360*Math.random(),changeAngle:-5+10*Math.random()}starArr.push(starObj);}setInterval(function(){update(cxt);},50); //3.星星随机的变化：星星闪烁是因为大小缩放function update(cxt){cxt.clearRect(0,0,canvas.width,canvas.height);for(var i=0;i<starArr.length;i++) {starArr[i].angle+=starArr[i].changeAngle;cxt.save();cxt.beginPath();cxt.translate(starArr[i].x, starArr[i].y);cxt.rotate(starArr[i].angle * Math.PI /360);cxt.scale(Math.sin(starArr[i].angle * Math.PI / 180), Math.sin(starArr[i].angle * Math.PI / 180));cxt.globalAlpha = Math.abs(Math.sin(starArr[i].angle * Math.PI / 180));drawStars(cxt,0,0,starArr[i].radius1,starArr[i].radius2,starArr[i].num);cxt.restore();}} //1.绘制一个星星function drawStars(cxt,x,y,radius1,radius2,num){var angle = 360/(num*2);var arr = [];for(var i=0;i<num*2;i++){var starObj = {};if(i%2==0){starObj.x = x+radius1*Math.cos(i*angle*Math.PI/180);starObj.y = y+radius1*Math.sin(i*angle*Math.PI/180);}else{starObj.x = x+radius2*Math.cos(i*angle*Math.PI/180);starObj.y = y+radius2*Math.sin(i*angle*Math.PI/180);}arr.push(starObj);}cxt.beginPath();cxt.fillStyle="#fff";cxt.moveTo(arr[0].x,arr[0].y);for(var i=1;i<arr.length;i++){cxt.lineTo(arr[i].x,arr[i].y);}cxt.closePath();cxt.fill();} </script></body></html>
如果觉得《canvas漫天闪烁的星星》对你有帮助，请点赞、收藏，并留下你的观点哦！
