window.onload=function(){ let canvas = document.getElementById('canvas1'); let c = canvas.getContext('2d'); canvas.width = canvas.height = 400; n = 0; c.lineWidth = 2; setInterval(function() { c.strokeStyle="#000000"; c.fillStyle="#ffffff"; c.fillRect(0, 0, canvas.width, canvas.height); c.strokeStyle="#00000000"; c.fillStyle="#000000ff"; n--; let a = []; for(var i = 0; i < canvas.width; i++) { a.push(i); } a.forEach(function(e) { c.beginPath(); c.moveTo(e + c.lineWidth / 2, 200 + (100 * Math.sin((e + n) * Math.PI / 180))); c.ellipse(e, 200 + (100 * Math.sin((e + n) * Math.PI / 180)), c.lineWidth / 2, c.lineWidth / 2, 0, 0, Math.PI * 2); c.moveTo(e + c.lineWidth / 2, 200 + (100 * Math.sin((e - n) * Math.PI / 180))); c.ellipse(e, 200 + (100 * Math.sin((e - n) * Math.PI / 180)), c.lineWidth / 2, c.lineWidth / 2, 0, 0, Math.PI * 2); c.fill(); }); }, 1000/30); }

window.onload=function(){ let c = new simpleCanvas('canvas2'); n = 0; c.c.lineWidth = 2; c.draw = function() { c.background(); n--; range(c.width).forEach(function(e) { c.point(e, 200 + (100 * Math.sin((e + n) * Math.PI / 180))); c.point(e, 200 + (100 * Math.sin((e - n) * Math.PI / 180))); }); }; }