canvas水母动画

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

}
	}
  function render() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.globalCompositeOperation = 'lighter'; //test
        //context.rect(0,0,150,150);
        //context.stroke();
        for(i=0;i<starArray.length;i++) {
              drawSingleStar(starArray[i],context);
             }
    
        }
	main();
	var then = Date.now();
}

function drawSingleStar(star, context) {
   context.shadowBlur = 15;
    context.shadowColor = "rgba(" + (star.color.red) + "," + (star.color.green) + "," + (star.color.blue) + "," + 0.3 + ")";
  var grd = context.createRadialGradient(star.x, star.y, 1, star.x, star.y, 15);
  grd.addColorStop(0,"rgba(255,255,225,1)");
  grd.addColorStop(1,"rgba(" + (star.color.red) + "," + (star.color.green) + "," + (star.color.blue) + "," + 0 + ")");
    context.beginPath();
    context.arc(star.x,star.y,15,0, 2 * Math.PI);
    context.fillStyle = grd;
    context.fill();

//Math.cos((angle - 90 * Math.PI/180) *  length + x;
    //Math.sin((angle - 90 * Math.PI/180) *  length + y;
    let top = {
      x:Math.cos((star.angle + 90) * Math.PI/180) *  15 + star.x,
      y:Math.sin((star.angle + 90) * Math.PI/180) *  15 + star.y,
    };
    let left = {
      x:Math.cos((star.angle + (-50)) * Math.PI/180) *  (65 + (-star.speed * 7)) + top.x, 
      y:Math.sin((star.angle + (-50)) * Math.PI/180) *  (65 + (-star.speed * 7)) + top.y,
    };
    let right = {
      x:Math.cos((star.angle + (230)) * Math.PI/180) *  (65 + (-star.speed * 7)) + top.x, 
      y:Math.sin((star.angle + (230)) * Math.PI/180) *  (65 + (-star.speed * 7)) + top.y,
    };
    
    let rightCtrl = {
      x:Math.cos((star.angle + (180)) * Math.PI/180) *  50 + top.x, 
      y:Math.sin((star.angle + (180)) * Math.PI/180) *  50 + top.y,
    };
    let leftCtrl = {
      x:Math.cos((star.angle + (0)) * Math.PI/180) *  50 + top.x, 
      y:Math.sin((star.angle + (0)) * Math.PI/180) *  50 + top.y,
    };
  
    context.shadowBlur = 30;
    context.shadowColor = "rgba(" + (star.color.red) + "," + (star.color.green) + "," + (star.color.blue) + "," + 1 + ")";

context.beginPath();
    context.lineJoin = "round";
    context.strokeStyle = "rgba(255,255,255,0.3)";
    function drawLine(point1, point2) {
    context.moveTo(point1.x,point1.y);
    context.lineTo(point2.x,point2.y);
    }
  
    function drawCurve(start, control, end) {
    context.moveTo(start.x, start.y);
    context.quadraticCurveTo(control.x,control.y, end.x, end.y);
    }
      
    let lineArray = [];
    let lineNumber = 15;
    for(n=0;n<lineNumber;n++) {
      let obj = {
      x:right.x+(left.x-right.x) * (n/lineNumber),
      y:right.y+(left.y-right.y) * (n/lineNumber),
      };
      lineArray.push(obj);
    }
   
    let ctrlArray = [];
    for(n=0;n<lineNumber;n++) {
      let obj = {
      x:rightCtrl.x+(leftCtrl.x-rightCtrl.x) * (n/lineNumber),
      y:rightCtrl.y+(leftCtrl.y-rightCtrl.y) * (n/lineNumber),
      };
      ctrlArray.push(obj);
    }
  
    let opacityCounter = 0.05 //lineNumber/100;
      let opacityStart = opacityCounter;
    for(k=0;k<lineArray.length;k++) {
      if(k <= lineArray.length/2) {
        context.strokeStyle = "rgba(255,255,255,"+ opacityStart +")";
        drawCurve(top,ctrlArray[k],lineArray[k]);
        opacityStart = opacityStart + opacityCounter;
      }else {
        context.strokeStyle = "rgba(255,255,255,"+ opacityStart +")";
        drawCurve(top,ctrlArray[k],lineArray[k]);
        opacityStart = opacityStart - opacityCounter;
      }
    }  
  
    drawCurve(top,leftCtrl,left);
    drawCurve(top,rightCtrl,right);
    drawLine(right,left);
    context.stroke();
    context.fillStyle = grad;
    context.closePath();

/* context.beginPath();
  context.moveTo(star.x,star.y);
  context.lineWidth = 5;
  context.strokeStyle = "black";
  context.lineTo(Math.cos((star.angle + 90) * Math.PI/180) * 65 + star.x, Math.sin((star.angle + 90) * Math.PI/180) * 65 + star.y);
  context.stroke(); 
  */
  for(x=0;x<star.tentacles.length;x++) {
    context.beginPath();
    context.moveTo(star.x,star.y);
    let tentacleX = Math.cos((star.angle + star.tentacles[x].angle - (90 + star.tentacles[x].start * -0.5)) * Math.PI/180) *  star.tentacles[x].length + star.x;
    let tentacleY = Math.sin((star.angle + star.tentacles[x].angle - (90 + star.tentacles[x].start * -0.5)) * Math.PI/180) *  star.tentacles[x].length + star.y;
  let C1X = Math.cos((star.angle + star.tentacles[x].angle - (90 + star.tentacles[x].start * - 0.5)) * Math.PI/180) *  star.tentacles[x].length/3 * 1 + star.x;
  let C1Y = Math.sin((star.angle + star.tentacles[x].angle - (90 + star.tentacles[x].start * - 0.5)) * Math.PI/180) *  star.tentacles[x].length/3 * 1 + star.y;
  let C2X = Math.cos((star.angle + star.tentacles[x].angle - (90 + star.tentacles[x].start)) * Math.PI/180) *  star.tentacles[x].length/3 * 2 + star.x;
  let C2Y = Math.sin((star.angle + star.tentacles[x].angle - (90 + star.tentacles[x].start)) * Math.PI/180) *  star.tentacles[x].length/3 * 2 + star.y;
  context.bezierCurveTo(C2X,C2Y,C1X,C1Y, tentacleX, tentacleY);
  var grad = context.createLinearGradient(star.x, star.y, tentacleX, tentacleY);
  grad.addColorStop(0, "white");
  grad.addColorStop(1, "transparent");
  context.lineWidth = 1;
	// set line color//
	context.strokeStyle = grad //'white';
    context.stroke();
  }
}

function getMouse(mouse) {
    onmousemove = function(e){
    //e.clientX;
    //e.clientY;
    document.getElementById("test").innerHTML = "location:" + "<div style='display:inline-block' id='mouseX'>" + e.clientX + "</div>,<div style='display:inline-block' id='mouseY'>" + e.clientY + "</div>";
    }
}

}
    else {
    starArray.push(createStar());
    }
  };
  let plancz;
  for(k=0;k<canvas.width/10;k++) {
    let obj = {
      x:Math.floor(Math.random() * canvas.width),
      y:Math.floor(Math.random() * canvas.height),
      id:"planc" + k,
    }
    plancArray.push(obj)
    plancz = document.createElement('div');
    plancz.id = "planc" + k;
    plancz.style.position = "absolute";
    plancz.style.width = "1px";
    plancz.style.height = "1px";
    plancz.style.opacity = "0.6";
    plancz.style.borderRadius = "90px"
    plancz.style.backgroundColor = "rgba(155,155,155,1)";
    plancz.style.left = obj.x + "px";
    plancz.style.top= obj.y + "px";
    plancz.style.zIndex = "10000";
    plancz.className = "plancton"
    if(k < 0) {
    plancz.style.animation = "starShine";
    plancz.style.animationIterationCount = "infinite"
    plancz.style.animationTimingFunction = "linear";
    plancz.style.animationDuration = Math.floor(Math.random() * 5 + 5) + "s";
    }
    document.getElementById("opacityOverlay").append(plancz)
  }
}

siteOnload();

window.addEventListener("resize", function(){
  var canvas = document.getElementById("mainstage");
  canvas.width = document.body.clientWidth;
  canvas.height = document.body.clientHeight;
}, true);

window.addEventListener("click", function(e) {
  console.log("clicked",e);
}, true);

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg