aktuelle.kurse/m152/auftraege/x_gitressourcen/Animationen/HTML5_Canvas/Canvas_10.html
harald.mueller@tbz.ch 834793a71f ressourcen
2021-07-05 23:00:44 +02:00

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>