html5 path 圆圈,HTML5/Canvas圆形轨迹

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var WIDTH = window.innerWidth;

var HEIGHT = window.innerHeight;

var RADIUS = Math.PI * 2;

var NB_POINT = 20000;

var ANGLE_STEP = 360 / NB_POINT;

var CENTER_X = WIDTH / 2;

var CENTER_Y = HEIGHT / 2;

var r = 20;

var y = 0;

var x = 0;

var angle = ANGLE_STEP;

var canvas = document.getElementById('workspace');

var ctx = canvas.getContext('2d');

canvas.height = HEIGHT;

canvas.width = WIDTH;

update();

function update() {

render(10, HEIGHT * 0.5, "rgba(155, 89, 182,1.0)");

render(10, HEIGHT * 0.4, "rgba(52, 152, 219,1.0)");

render(10, HEIGHT * 0.3, "rgba(241, 196, 15,1.0)");

render(10, HEIGHT * 0.2, "rgba(46, 204, 113,1.0)");

render(10, HEIGHT * 0.1, "rgba(231, 76, 60,1.0)");

angle += ANGLE_STEP;

if (angle > RADIUS) {

angle = 0;

}

ctx.fillStyle = "rgba(44, 62, 80,0.1)";

ctx.fillRect(0, 0, WIDTH, HEIGHT);

requestAnimationFrame(update);

}

function render(r, _r, color) {

x = r + _r * Math.cos(angle) + CENTER_X;

y = r + _r * Math.sin(angle) + CENTER_Y;

ctx.fillStyle = color;

ctx.beginPath();

ctx.arc(x, y, r, 0, RADIUS);

ctx.fill();

ctx.closePath();

}