canvas黑洞漩涡

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

var elements = 1000; // more the merrier

var shiftmod = 1/6; // modifier for the x&y distance between each element: DEFAULT=1
var angle = 37; // degree to rotate the canvas between each element
var scale =  5; // number of elements that would fit in the available height

var colorstep = 0.75; // how quickly to adjust the color each frame
var coloralpha = 0.50; // alpha to render elements in
var colorcap = 255; // maximum color brightness

var rotation = 1/10; // how much to rotate the canvas each frame
var clearScreenAlpha = 0.90; // alpha value for the screen erase each frame

var zoom = 1.50; // zoom level

var triheight = 0.10; // modifier for the triangle height (lower is shorter)

////////////////////

function start()
{
  resize();
  init();
  tick();
}

var colors = new Array(elements);
var increments = new Array(elements);

var size;
var shift;

function init()
{
  var targetheight = canvas.height*zoom; 
  shift = targetheight/elements*shiftmod;
  size = Math.max(1, targetheight/scale);
  
  for( var i = 0; i < elements; i++ )
  {
    increments[i] = 0;

colors[i] = Math.round(colorcap - colorcap*i/elements);
  }
}

var framesRendered = 0;

function tick()
{
  // draw a frame
  draw();
  
  // trigger the timer for the next frame...
  requestAnimFrame(tick);
}

function clearCanvas(context)
{
  context.fillStyle = "rgba(0, 0, 0, " + clearScreenAlpha + " )";
  context.fillRect (0, 0, canvas.width, canvas.height);
}

window.requestAnimFrame = (function()
 {
    return  window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame   ||
    window.mozRequestAnimationFrame      ||
    window.oRequestAnimationFrame        ||
    window.msRequestAnimationFrame       ||
    function (callback) {
      window.setTimeout(callback, 1000 / 60);
    };
  })();

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

function resize()
{
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        canvas.width = parseInt(getComputedStyle(document.body).width) - 4;
        canvas.height = parseInt(getComputedStyle(document.body).height) - 4; 
      }   
}

start();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg