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= .........完整代码请登录后点击上方下载按钮下载查看