mirror of
https://gitlab.com/harald.mueller/aktuelle.kurse.git
synced 2024-11-24 10:41:56 +01:00
54 lines
1.1 KiB
HTML
54 lines
1.1 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 = 0;
|
||
|
|
let change = 1;
|
||
|
|
let ctx;
|
||
|
|
let strokeStyle = "black";
|
||
|
|
|
||
|
|
function zeichneLinie()
|
||
|
|
{
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(x, 0);
|
||
|
|
ctx.lineTo(rectSize-x, rectSize);
|
||
|
|
ctx.stroke();
|
||
|
|
}
|
||
|
|
|
||
|
|
function zeichne()
|
||
|
|
{
|
||
|
|
ctx = document.getElementById("myCanvas").getContext("2d");
|
||
|
|
|
||
|
|
ctx.clearRect(0, 0, rectSize, rectSize);
|
||
|
|
ctx.fillStyle = "green";
|
||
|
|
ctx.strokeStyle = "blue";
|
||
|
|
ctx.lineWidth = 5;
|
||
|
|
ctx.save();
|
||
|
|
|
||
|
|
ctx.fillRect(0, 0, rectSize, rectSize);
|
||
|
|
|
||
|
|
x += change;
|
||
|
|
if (x > rectSize || x < 0){
|
||
|
|
change = -change;
|
||
|
|
if (strokeStyle == "black") { strokeStyle = "yellow"; } else { strokeStyle = "black"; }
|
||
|
|
ctx.strokeStyle = strokeStyle;
|
||
|
|
}
|
||
|
|
zeichneLinie();
|
||
|
|
|
||
|
|
window.requestAnimationFrame(zeichne);
|
||
|
|
}
|
||
|
|
|
||
|
|
zeichne();
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|