canvas漫天闪烁的星星

最新推荐文章于 2021-10-27 10:41:59 发布

面条请不要欺负汉堡

最新推荐文章于 2021-10-27 10:41:59 发布

阅读量852

点赞数

CC 4.0 BY-SA版权

分类专栏： html5 文章标签： canvas漫天闪烁的星星漫天闪烁的星星 canvas

本文链接：https://blog.youkuaiyun.com/gao_xu_520/article/details/62214961

html5 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种使用HTML5 Canvas绘制闪烁星星的方法。通过创建多个星星对象，并利用随机变化的缩放和透明度来模拟星星的闪烁效果。适用于网页背景装饰等应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.原理

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

二.代码

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