canvas实现黄色旋涡旋转动画效果代码-html代码-BFW代码库

canvas实现黄色旋涡旋转动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现黄色旋涡旋转动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
html { height: 100%; }

body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: black; 
}
</style>



</head>


  <body onresize="resize()">
<canvas id="canvas"></canvas>


  
      <script>
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 draw() {
  var canvas = document.getElementById("canvas");
  if (canvas.getContext) {
    var context = canvas.getContext("2d");

    context.setTransform(1, 0, 0, 1, 0, 0);

    clearCanvas(context);

    // set the origin
    context.translate(canvas.width / 2, canvas.height / 2);

    // rotate the canvas based on the frame
    context.rotate(2 * Math.PI / 360 * framesRendered * rotation);

    // draw them all
    f.........完整代码请登录后点击上方下载按钮下载查看