var config = { "canvas_width": 250, "canvas_height": 250, "center": { "x": 150, "y": 150 }, "width": 100, "fps": 60, "loop_length": 2750, }; var drawArc = function (dig, context, conf) { var alpha = 0.2; var delta = 0.45; var mod_delta = Math.PI * 2 * 0.7; var loop_ratio = 2; var rotate_degree = 0.5; var start_d = dig * loop_ratio + alpha * ( Math.sin(Math.PI * 2 * dig) + 1); var end_d = dig * loop_ratio + alpha * ( Math.sin(Math.PI * 2 * dig + mod_delta) + 1) + delta; context.clearRect(0, 0, 500, 500); context.beginPath(); context.arc(conf.center.x, conf.center.y, conf.width, Math.PI * 2 * (start_d - rotate_degree), Math.PI * 2 * (end_d - rotate_degree), true); context.stroke(); }; var startAnimation = function (conf) { var canvas = document.querySelector("canvas#main"); var ctx = canvas.getContext("2d"); ctx.scale(1, 0.5); // why? ctx.lineWidth = 10; ctx.strokeStyle = "#666666"; var i = 0; var start_t = new Date().getTime(); var doAnimate = function () { var d = (new Date().getTime() - start_t) / conf.loop_length; d = d % 1; drawArc(d, ctx, conf); setTimeout(function () { requestAnimationFrame(doAnimate); }, (1000 / config.fps) / 5); }; doAnimate(); }; startAnimation(config);
<canvas id="main"></canvas>
canvas#main { border : 1px #d0d0d0 solid; width:250px; height:250px; }