javascript 画 sin 函数 简单动画 基于浏览器canvas组件

主要利用浏览器的原生canvas组件制作动画 动画的绘制使用原生定时器＋原生函数Promise实现sleep, 整体代码包裹在原生特性异步立即执行函数IIFE 实现立即执行.

html

<canvas id="myCanvas" width="360" height="360" style="border:1px solid #d3d3d3;">

js

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var i;
for (i = 0; i < 360; i += 20) {
  ctx.moveTo(i + 5, 180);
  ctx.lineTo(i, 180);

}
ctx.stroke();

var counter = 0,
  x = 0,
  y = 180;

const sleep = milSec => new Promise(resolve => setTimeout(resolve, milSec))

//100 iterations
var increase = 90 / 180 * Math.PI / 9;
(async () => {
  for (i = 0; i <= 360; i += 10) {

    ctx.moveTo(x, y);
    x = i;
    y = 180 - Math.sin(counter) * 120;
    counter += increase;
    await sleep(50)
    ctx.lineTo(x, y);
    ctx.stroke();
  }
})()

效果