canvas插花旋转动画效果代码-html代码-BFW代码库

canvas插花旋转动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas插花旋转动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">



</head>

<body>

    <script>
        "use strict"; 
    const body=document.getElementsByTagName("body").item(0);
    body.style.background="#000";
    
    const TP=2*Math.PI;
    const CSIZE=400;
    
    const ctx=(()=>{
      let d=document.createElement("div");
      d.style.textAlign="center";
      body.append(d);
      let c=document.createElement("canvas");
      c.width=2*CSIZE;
      c.height=2*CSIZE;
      c.style.border="8px gray outset";
      d.append(c);
      return c.getContext("2d");
    })();
    ctx.translate(CSIZE,CSIZE);
    ctx.lineCap="round";
    //ctx.shadowColor="white";
    
    onresize=()=>{ 
      let D=Math.min(window.innerWidth,window.innerHeight)-40; 
      ctx.canvas.style.width=D+"px";
      ctx.canvas.style.height=D+"px";
    }
    
    const getRandomInt=(min,max,low)=>{
      if (low) {
        return Math.floor(Math.random()*Math.random()*(max-min))+min;
      } else {
        return Math.floor(Math.random()*(max-min))+min;
      }
    }
    
    var chue=getRandomInt(0,360);
    var getHSLString=(f)=>{
      let hue=(chue+getRandomInt(0,90))%360;
      let sat=60+35*Math.random();
      let lum=40+f*40;
      return "hsl("+hue+","+sat+"%,"+lum+"%)";
    }
    
    const DUR=24000;
    var Growth=function(df) {
      this.time=-getRandomInt(0,DUR);
      this.randomize=()=>{
        // constrain X,Y within ellipse, offset up 100
        let a=TP*Math.random();
        this.X=Math.round(320*Math.pow(Math.random(),0.5)*Math.cos(a));
        let ry=250*Math.pow(Math.random(),0.5);
        //this.X=Math.round(rx*Math.cos(a));
        this.Y=Math.round(-100+ry*Math.sin(a));	// up 160 for 240?
        this.Xpf=Math.random();
        this.Ypf=Math.random();
        this.sColor=getHSLString(df);
        this.fColor=getHSLString(df);
        this.kinex=getRandomInt(1,8)*[-1,1][getRandomInt(0,2)];
        this.kiney=getRandomInt(1,8)*[-1,1][getRandomInt(0,2)];
        this.duration=DUR-Math.round(Math.random()*4000);
      }
      this.randomize.........完整代码请登录后点击上方下载按钮下载查看