canvas阳光普照动态变换效果-html代码-BFW代码库

canvas阳光普照动态变换效果

代码语言：html

所属分类：动画

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<style>
html{ background: black;}
body { width: 100%; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden; margin: 0; background: black; -webkit-filter: invert(0); filter: invert(0); }
#canvas { position: absolute; z-index: -1; -webkit-filter: hue-rotate(100deg) brightness(1); filter: hue-rotate(100deg) brightness(1); mix-blend-mode: difference; }
#canv { position: absolute; z-index: -2; mix-blend-mode: lighter; }
canvas { position: absolute; top: 50%; left: 50%; z-index: -1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
</style>
</head>
<body>
<canvas id='canvas'></canvas>
<canvas id='canv'></canvas>
<script>
var c = document.getElementById('canv'),
 $ = c.getContext('2d'),
 w = c.width = window.innerWidth,
 h = c.height = window.innerHeight,
 t = 0,
 num = 950,
 s, a, b, u = 0,
 x, y, _x, _y,
 _t = 1 / 16;

function random(min, max) {
 return Math.random() * (max - min) + min;
}

var anim = function() {
 $.globalCompositeOperation = 'multiply';
 $.fillStyle = 'hsla(258,20%,50%,1)';
 $.fillRect(0, 0, w, h);
 $.globalCompositeOperation = 'lighter';
 for (var i = 0; i < .5; i++) {
  x = 0;
  _u = (u) + i * 2, col = u + (_u * 8);
  $.beginPath();
  for (var j = 0; j < num; j++) {
   x -= .312 * Math.sin(15);
   y = x * Math.sin(i + 3.05 * t + x / 7) / 12;
   _x = x * Math.cos(b) + y * Math.sin(b);
   _y = x * Math.sin(b) - y * Math.cos(b);
   b = (j * 2.1102) * Math.PI / -.1008;
   $.arc(w / 2 - _x, h / 2 - _y, random(.001, .6), 300, Math.PI * 2 + .1);
   $.lineWidth = .2;
  }
  var g = $.createLinearGradient(w / 2 + _x, h / 2 + _y,
   1, w / 2 + _x, h / 2 + _y);
  g.addColorStop(0.2, 'hsla(' + col + ',90%,50%,.2)');
  g.addColorStop(0.9, 'hsla(' + _u + ',95%,50%,.3)');
  g.addColorStop(1, 'hsla(0,0%,100%,.4)');
  $.strokeStyle = g;
  $.stroke();
 }
 t += _t / 2;
 u -= .2;
 window.requestAnimationFrame(anim);
};
anim();

window.addEventListener('resize', function() {
 c.width = w = window.innerWidth;
 c.height = h = window.innerHeight;
}, false);

var canvas, ctx, tim.........完整代码请登录后点击上方下载按钮下载查看