mirror of
https://gitlab.com/harald.mueller/aktuelle.kurse.git
synced 2024-12-02 22:51:57 +01:00
37 lines
732 B
HTML
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>
|