mirror of
https://gitlab.com/harald.mueller/aktuelle.kurse.git
synced 2024-10-19 18:05:02 +02:00
52 lines
1.0 KiB
HTML
52 lines
1.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Canvas</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>HTML5 Canvas</h1>
|
||
|
|
<canvas id="myCanvas" width="300" height="500"/>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const rectSize = 200;
|
||
|
|
const callIntervalMs = 10;
|
||
|
|
let x;
|
||
|
|
let ctx;
|
||
|
|
let strokeColor = "black";
|
||
|
|
|
||
|
|
function zeichneLinie()
|
||
|
|
{
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(x, 0);
|
||
|
|
ctx.lineTo(rectSize-x, rectSize);
|
||
|
|
ctx.stroke();
|
||
|
|
x++;
|
||
|
|
if (x > rectSize){
|
||
|
|
x = 0;
|
||
|
|
if (strokeColor == "black") { strokeColor = "yellow"; } else { strokeColor = "black"; }
|
||
|
|
ctx.strokeStyle = strokeColor;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function zeichne()
|
||
|
|
{
|
||
|
|
ctx.fillStyle = "red";
|
||
|
|
ctx.fillRect(0, 0, rectSize, rectSize);
|
||
|
|
|
||
|
|
x = 0;
|
||
|
|
strokeColor = "black";
|
||
|
|
window.setInterval(zeichneLinie, callIntervalMs);
|
||
|
|
}
|
||
|
|
|
||
|
|
let cv = document.getElementById("myCanvas");
|
||
|
|
if (cv.getContext){
|
||
|
|
ctx = cv.getContext("2d");
|
||
|
|
zeichne();
|
||
|
|
} else {
|
||
|
|
alert("Der Browser unterstützt das <canvas>-Element nicht :-(");
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|