canvas球体变色旋转风暴动画效果-html代码-BFW代码库

canvas球体变色旋转风暴动画效果

代码语言：html

所属分类：动画

代码描述：canvas球体变色旋转风暴动画效果

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html {
  height:100%;
  overflow: hidden;
  background: hsla(330, 90%, 15%, 1);
  background-image: radial-gradient(top, circle cover, hsla(330, 90%, 15%, 1) 20%, hsla(0, 0%, 0%, 1) 80%);
cursor:move;
}
body{
  width: 100%;
  margin: 0;
}
</style>

</head>
<body translate="no">
<canvas id="canv"></canvas>


<script >
var c = document.getElementById('canv');
var $ = c.getContext('2d');
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;
var orbit;
var pov = 200;
var oy = -15;
var ox = 3.98;
var prevX = false;
var prevY = false;
var dx = 0;
var dy = 0;
var op = 0;
var ax = [];
var ay = [];
var az = [];
var as = [];
var ao = [];

set();
function set() {
  depth();
  $.translate(w / 2, h / 2);
  draw();
}

function draw() {
  $.clearRect(-w, -h, w * 2, h * 2);
  oy -= 0.03;
  if (ox > 1) ox = 1;else
  if (ox < 0.5) ox = 0.5;
  if (oy < -Math.PI * 2 * 2) {
    oy = 0;
    op += 3;
    if (op > 3) op = 0;
  } else if (oy > 0) {
    oy = -Math.PI * 2 * 2;
    op -= 3;
    if (op < 0) op = 3;
  }
  var sz = 0;
  var oz = 1;
  var x, y, z, xy, xz, yx, yz, zx, zy, sc;
  var o;
  var i = orbit;
  var arr = [];
  while (i--) {
    x = ax[i];
    y = ay[i];
    z = az[i];
    yz = Math.cos(oy) * z - Math.sin(oy) * x;
    yx = Math.sin(oy) * z + Math.cos(oy) * x;
    xy = Math.cos(ox) * y - Math.sin(ox) * yz;
    xz = Math.sin(ox) * y + Math.cos(ox) * yz;
    zx = yx;
    zy = xy;
    sc = pov / (pov + yz);
    x = zx * sc;
    y = zy * sc;
    z = yz;

    var zpos = Math.round(1500 * sc);
    if (!arr[zpos]) arr[zpos] = [];
    if (i < oy * -200) o = op + 3;else
    if (i < oy * -400) o = op + 2;else
    o = op + 1;
    arr[zpos].push([x, y, sc * as[i], o]);
  }
  var j = 0;
  var o_;
  var o = arr.length;
  while (i < o) {
    if (arr[i]) {
      j = arr[i].length;
      while (j--) {
        o_ = arr[i][j];
        $.save();
        $.translate(o_[0], o_[1]);
        $.scale(o_[2], o_[2]);
        syst(o_[3]);
        $.restore();
      }
    }
    i++;
  }
  window.requestAnimationFrame(draw).........完整代码请登录后点击上方下载按钮下载查看