圆波

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

'use strict';

// Global vars & consts
// *****************************************
var ctx = document.querySelector('#canvas').getContext('2d');

var PI = Math.PI;
var toRad = function toRad(deg) {
  return deg * (180 / PI);
};
var toDeg = function toDeg(rad) {
  return rad * (PI / 180);
};

// Parameters
// *****************************************
var MaxR = 100;
var R = 0;
var Angle = 90;
var Speed = 0.5;
var Velocity = 10;
var BG = '#222';
var FG = '#DDD';

var skewX = 0;
var skewY = 0;
// *****************************************

// Init animation
function init() {
  ctx.canvas.width = WW();
  ctx.canvas.height = WH();

ctx.fillStyle = BG;
  ctx.fillRect(0, 0, WW(), WH());
}

// Redraw canvas
function draw() {
  if (R < WW) {
    R += Speed;
  } else {
    R -= Speed;
  }

Angle += Velocity;

var newX = O.x + R * Math.cos(toRad(Angle + skewX));
  var newY = O.y + R * Math.sin(toRad(Angle + skewY));

ctx.strokeStyle = FG;
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.arc(newX, newY, 0.1, 0, PI * 2);
  ctx.stroke();

window.requestAnimationFrame(draw);
}

function start() {
  init();

window.addEventListener('resize', init);
  window.requestAnimationFrame(draw);
}

start();

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