<!doctype html>
<html>
<head>
<title>canvasExample</title>
<meta charset='utf-8' />
</head>
<body onload="setInterval('mainfunc()', 10)">
<canvas height='1000' width='1000' id='example'>Обновите браузер</canvas>
<script>
let a = 250;
let b = 50;
let c = 50;
let d = 50;
function mainfunc(){
let example = document.getElementById("example"),
ctx = example.getContext('2d');
for (let x = 0; x < 3600;x+=0.1)
{
ctx.fillStyle = "#FF0000";
let y1 = a + b*Math.sin(c*x + d);
ctx.fillRect(x,y1,1,1);
ctx.fillStyle = "#00FF00";
let y2 = a + b*Math.cos(c*x + d)+100;
ctx.fillRect(x,y2,1,1);
}
}
</script>
</body>
</html>
| 