绘制曲线

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

// Create Canvas.
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// Store all particles.
var particles = [];
// The default colorset.

// Configure settings options
var config = {};
var settings = document.getElementById('settings');
initSettings();

// Init.
resize();
// Fire the Go! button.
settings.btnSet.onclick();
// Attach canvas.
document.body.appendChild(canvas);
// Begin drawing.
window.requestAnimationFrame(draw);
// Sync canvas to window.
window.onresize = resize;

function start (delay) {
  clear();
  config.toCreate = config.num;
}

// Drawing.
var tick = 0;
function draw () {
  for (var i=0; i<particles.length; i++) {
    var p = particles[i];
    p.move();
    p.draw(ctx);
  }
  fade();
  window.requestAnimationFrame(draw);
  
  if (config.toCreate) {
    if (!(tick%(config.delay)))
      {
        createBall((180/config.num)*config.toCreate);
        config.toCreate--;
      }
  }
  tick++;
}

/* Common functions */

function rand(min, max) {
  return Math.random()*(max-min)+min;
}
function randColor(min, max) {
    var r = Math.floor(rand(min,max)),
        g = Math.floor(rand(min,max)),
        b = Math.floor(rand(min,max));
    return 'rgba('+r+','+g+','+b+',1)';
}

// Settings

function preset (options) {
  for (var i in options) {
    settings[i].value = options[i];
  }
  settings.btnSet.onclick();
}

function initSettings () {
  settings.btnSet.onclick = function () {
    config.num = parseInt(settings.inNum.value);
    config.size = parseInt(settings.inSize.value);
    config.speed = parseInt(settings.inSpeed.value);
    config.delay = parseInt(settings.inDelay.value);

start(config.delay);
  }

// Presets.
  settings.preset0.onclick = function () {
    preset({
      inNum:20,
      inSize:20,
      inSpeed:5,
      inDelay:8
    });
  }
  settings.preset1.onclick = function () {
    preset({
      inNum:184,
      inSize:10,
      inSpeed:5,
      inDelay:6
    });
  }
  settings.preset2.onclick = function () {
    preset({
      inNum:79,
      inSize:10,
      inSpeed:5,
      inDelay:6
    });
  }
  settings.preset3.onclick = function () {
    preset({
      inNum:20,
      inSize:30,
      inSpeed:10,
      inDelay:3
    });
  }
  settings.preset4.onclick = function () {
    preset({
      inNum:80,
      inSize:2,
      inSpeed:20,
      inDelay:1
    });
  }
}

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