canvas漫天闪烁的星星

我不是女神ヾ 2021-09-12 02:16 372阅读 0赞

![20170315085427404][]

一.原理

星星之所以闪烁：采用的随机的抽取的星星发生缩放，从大足见变没有。

二.代码

<!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>

[20170315085427404]: /images/20210813/a511fb9d3bf749ad9a03c9994a1d52c9.png