canvas实现五彩缤纷的五角星粒子动画效果代码-html代码-BFW代码库

canvas实现五彩缤纷的五角星粒子动画效果代码

代码语言：html

所属分类：粒子

代码描述：canvas实现五彩缤纷的五角星粒子动画效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    body {
  width: 100%;
  margin: 0;
  overflow: hidden;
}

canvas {
  display: block;
}
</style>

</head>
<body>

<canvas id='canv'></canvas>
<!-- partial -->
  <script  >
      var c = document.getElementById('canv');
var $ = c.getContext('2d');
var u = 0;

var go = function() {
  var sc, g, g1, i, j, p, x, y, z, w, a, cur,
    d = new Date() / 1000,
    rnd = shift(),
    rnd1 = d,
    rnd2 = 2.4,
    rnd3 = d * 0.2,
    rnd1c = Math.cos(rnd1),
    rnd1s = Math.sin(rnd1),
    rnd2c = Math.cos(rnd2),
    rnd2s = Math.sin(rnd2);

  c.width = window.innerWidth;
  c.height = window.innerHeight;
  sc = Math.max(c.width, c.height);
  $.translate(c.width * 0.5, c.height * 0.5);
  $.scale(sc, sc);
  g = $.createLinearGradient(-1, -2, 1, 2);
  g.addColorStop(0.0, 'hsla(338, 95%, 25%, 1)');
  g.addColorStop(0.5, 'hsla(260, 95%, 5%, 1)');
  g.addColorStop(1.0, 'hsla(338, 95%, 30%, 1)');
  $.fillStyle = g;
  $.fillRect(-0.5, -0.5, 1, 1);
  $.globalCompositeOperation = 'lighter';
  $.rotate(rnd3 % Math.PI * 2);
  for (i = 0; i < 300; i += 1) {
    p = rnd();
    x = (p & 0xff) / 128 - 1;
    y = (p >>> 8 & 0xff) / 128 - 1;
    z = (p >>> 16 & 0xff) / 128 - 1;
    w = (p >>> 24 & 0xff) / 256;
    z += d * 0.5;
    z = (z + 1) % 2 - 1;
    a = (z + 1) * 0.5;
    if (a < 0.9) {
      $.globalAlpha = a / 0.7;
    }else {
      a -= 0.9;.........完整代码请登录后点击上方下载按钮下载查看