JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id = "canvas"></canvas>

JavaScript

window.addEventListener('resize', resize);
var canvas = document.getElementById('canvas'); //canvas的dom对象
var ctx = canvas.getContext('2d');        //上下文
var center;//显示界面canvas画布半径/中心
var canvasSnow;//基础雪花图案
var snowNum = 1;
var isAdd = true;
resize();

function resize(){
  var SCREEN_W = window.innerWidth          //获取屏幕宽度
  canvas.setAttribute('width', SCREEN_W * 2)    //以屏幕宽度为宽画图
  canvas.setAttribute('height', SCREEN_W * 2)
  canvas.style.width = SCREEN_W + 'px';
  canvas.style.height = SCREEN_W + 'px';
  ctx.lineWidth = 2;//1px细线，画布尺寸为其两倍
  center = SCREEN_W;
  ctx.translate(center, center);
  
  snowNum = 6;
  //drawCanvas();
  var loop = setInterval(
  function(){
  drawCanvas()
  }
  , 10);
}
function drawCanvas(){
  var rSnow = center/2 * (snowNum - 6)/6;
  canvasSnow = drawCanvasSnow(rSnow);
  ctx.clearRect(-center, -center, center * 2, center * 2);
  for(var i = 0; i < snowNum; i++){
    drawSnowAngle(ctx, center - rSnow, i/snowNum, rSnow * 2);
  }
  if(snowNum >= 18){isAdd = false;}
  else if(snowNum <= 1){isAdd = true;}
  if(isAdd){snowNum += snowNum/200;}
  else{snowNum -= snowNum/100;}
}
function drawSnowAngle(ctx,r,angle,size){
  ctx.save();
  ctx.rotate(Math.PI*2 * angle);
  drawLine(ctx,0,0,r,0,"#656565");
  ctx.drawImage(canvasSnow, 0, 0, canvasSnow.width, canvasSnow.height,
    r - size/2, -size/2, size, size);
  ctx.restore();
}

function drawCanvasSnow(centerSnow){
  var canvasSnow = document.createElement('canvas');
  var ctxSnow = canvasSnow.getContext('2d');
  canvasSnow.setAttribute('width', centerSnow * 2);
  canvasSnow.setAttribute('height', centerSnow * 2);
  var canvasSingleSnow = function(snowSize){
    var singleSnow = document.createElement('canvas');
    var ctxSingle = singleSnow.getContext('2d');
    singleSnow.setAttribute('width', snowSize * 2);
    singleSnow.setAttribute('height', snowSize * 2);
    ctxSingle.translate(snowSize, snowSize);
    for(var i = 0; i < 6; i++){
      ctxSingle.save();
     ...