Canvas动画彩色小球下落

最新推荐文章于 2022-07-01 09:49:51 发布

KatyLight

最新推荐文章于 2022-07-01 09:49:51 发布

阅读量306

点赞数

分类专栏： Canvas 文章标签：动画 html css canvas

本文链接：https://blog.csdn.net/qq_33014695/article/details/122251328

版权

Canvas 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

彩色小球.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>

    let c=null;
    let ctx;
    let star=[];
    function createStar(){
      for(let i=0;i<300;i++){
        star.push({
          x:Math.floor(Math.random()*1000),
          y: Math.floor(Math.random()*1000),
          color:randomColor()
        })
      }

    }
    function randomColor(){
      let c='hsla(';
      c+=Math.floor(Math.random()*360);

        c+=',100%,50%,0.8)';
         return c;

    }
    function starMove(){
      for(let i=0;i<star.length;i++){
        star[i].y+=3;
        if(star[i].y>1000){
          star[i].y=0;
          star[i].x=Math.floor(Math.random()*1000);
          star[i].color=randomColor();
        }
        ctx.fillStyle=star[i].color;
        ctx.beginPath();
        ctx.arc(star[i].x,star[i].y,5,0,Math.PI*2);
        ctx.fill();
        ctx.closePath();
      }
    }
    function drawStar(){

    }
    window.onload=()=>{
      c=document.getElementById('c');
      ctx=c.getContext('2d');

      createStar();
      setInterval(()=>{
        ctx.clearRect(0,0,c.width,c.height);
        starMove();


      },10)

    }
  </script>
</head>
<body>
<canvas width="1000" height="1000" id="c" style="background-color: black;border:1px solid black;"></canvas>

</body>
</html>

KatyLight

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas动画彩色小球下落

彩色小球.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> let c=null; let ctx; let star=[]; function createStar(){ for(let i=0;i<300...
复制链接

扫一扫