canvas实现点连成珠子鼠标交互太空星光动画效果代码-html代码-BFW代码库

canvas实现点连成珠子鼠标交互太空星光动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现点连成珠子鼠标交互太空星光动画效果代码

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

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

<head>
    <meta charset="UTF-8">
<style>
    @import url(https://fonts.googleapis.com/css?family=Economica);
body {
  width: 100%;
  margin: 0;
  overflow: hidden;
  cursor: move;
}
</style>
</head>

<body>

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

    <script>
        var c = document.getElementById('canv');
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;

var $ = c.getContext('2d');
var _x = w / 2;
var _y = h / 2;

var sc = 150;
var num = 35;

var midX = new Array(num);
var midY = new Array(num);
var rad = new Array(num);

var msX = 0.0;
var msY = 0.0;
var _msX = 0.0;
var _msY = 0.0;

var invX = 0.0;
var invY = 0.0;
var _invX = 0.0;
var _invY = 0.0;

var spr = 0.95;
var fric = 0.95;
var flag = 1;
var arr = [];
var rint = 60;

var draw = function() {
  window.requestAnimationFrame(draw);
  inv();
  fill();
  ring();
  for(var j= 0; j < arr.length; j++) {
		arr[j].fade();
		arr[j].anim();
		arr[j]._draw();
	} 
}
var inv = function() {
  invX = msX;
  invY = msY;
  _msX += (_invX - invX) * spr;
  _msY += (_invY - invY) * spr;
  _msX *= fric;
  _msY *= fric;
  _invX = invX;
  _invY = invY;
  invX += _msX;
  invY += _msY;
}

var txt = function() {
  var t0 = "interstellar".split("").join(String.fromCharCode(0x2004));
  var t = "starlight".split("").join(String.fromCharCode(0x2004));
  $.font = "3em Economica";
  $.fillStyle = 'hsla(220, 95%, 75%, .55)';
  $.fillText(t0, (c.width - $.measureText(t0).width) * 0.5, c.height * 0.45);
  $.fillText(t, (c.width - $.measureText(t).width) * 0.5, c.height * 0.55);
  return t;
}
var fill = function() {
  $.globalCompositeOperation= 'source-over';
  var g_ = $.createLinearGradient(c.width + c.width, c.height + c.height * 1.5, c.width + c.width, 1);
  g_.addColorStop(0, ' hsla(220, 95%, 10%, .55)');
  g_.addColorStop(0.5, 'hsla(220, 95%, 30%, .55)');
  g_.addColorStop(1, 'hsla(0, 0%, 5%, 1)');
  $.fillStyle = g_;
  $.fillRect(0, 0, w, h);
  $.globalCompositeOperation= 'lighter';
  txt();
}

var ring = function() {
  for (i = 0; i < num; i++) {
    var currX = midX[i];
    var currY = midY[i];
    var currRad = rad[i];
    var dx = currX + invX;
    var dy = currY + invY;
    var s = 1 / (dx * dx + dy * dy - currRad * currRad);
    ix = dx * s + (currX * flag);
    iy = -dy * s + (currY * flag);
    var irad = currRad * s;
    var g = $.createRadialGradient(ix * sc + _x,
      iy * sc + _y,
      irad,
      ix * sc + _x,
      iy * sc + _y,
      irad * sc)
    g.addColorStop(0, .........完整代码请登录后点击上方下载按钮下载查看