aktuelle.kurse/m152/auftraege/x_gitressourcen/Animationen/HTML5_Canvas/Canvas_1.html
harald.mueller@tbz.ch e256f5211b reorg2
2021-07-20 16:00:23 +02:00

37 lines
732 B
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>
function zeichne()
{
let ctx = cv.getContext("2d");
ctx.fillStyle = "red";
/* Linie zeichnen vom Punkt 0,0 zu 50,50 */
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(50, 50);
ctx.stroke();
/* Rechteck zeichnen mit x=50, y=50, breite=200, höhe=300 */
ctx.fillRect(50, 50, 200, 300);
}
let cv = document.getElementById("myCanvas");
if (cv.getContext){
zeichne();
} else {
alert("Der Browser unterstützt das <canvas>-Element nicht :-(");
}
</script>
</body>
</html>