mirror of
https://gitlab.com/harald.mueller/aktuelle.kurse.git
synced 2024-11-30 13:41:58 +01:00
35 lines
654 B
HTML
35 lines
654 B
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Canvas</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>HTML5 Canvas (Sinuskurve)</h1>
|
||
|
|
<canvas id="myCanvas" width="1000" height="1000"/>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const rectSize = 500;
|
||
|
|
let x = 0;
|
||
|
|
|
||
|
|
function zeichne()
|
||
|
|
{
|
||
|
|
let ctx = document.getElementById("myCanvas").getContext("2d");
|
||
|
|
|
||
|
|
x+=1;
|
||
|
|
if (x > rectSize){
|
||
|
|
ctx.clearRect(0, 0, rectSize, rectSize);
|
||
|
|
x = 0;
|
||
|
|
}
|
||
|
|
let y = (Math.sin(x/10) + 1); // + 1 => dadurch immer positive Werte
|
||
|
|
ctx.fillRect(x, y*50, 1, 1);
|
||
|
|
|
||
|
|
window.requestAnimationFrame(zeichne);
|
||
|
|
}
|
||
|
|
|
||
|
|
zeichne();
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|