Ein Canvas-Element ist ein durch Höhen- und Breitenangaben definierte Bitmap, in der mithilfe von JavaScript Grafiken gezeichnet werden können. Ursprünglich von Apple als Teil von WebKit entwickelt, wurde es später von der Arbeitsgruppe WHATWG im Rahmen der Auszeichnungssprache HTML5 standardisiert.
|
| Beschreibung | HTML | Erklärung |
|---|
Der innerhalb des Canvas bereitgestellte Inhalt wird in Browsern, die Canvas nicht unterstützen oder bei deaktiviertem JavaScript gerendert. Von den möglichen Rendering Kontexten wird 2D von den meisten Browsern unterstützt. Die obere linke Ecke der Bitmap hat die Koordinaten (0,0).
| <canvas
id="can1"
width="120"
height="120"
>Canvas wird nicht unterstützt.
</canvas>
<script>
const can1 = document.
getElementById('can1');
</script>
<canvas
id="can2"
width="120"
height="120"
>
</canvas>000
<script>
const can2 = document.
getElementById('can2');
const ctx2 = can2.
getContext('2d');
ctx2.fillStyle = 'red';
ctx2.fillRect(10, 10, 100, 100);
</script>
<canvas
id="can3"
width="120"
height="120"
>
</canvas>
<script>
const can3 = document.
getElementById('can3');
const ctx3 = can3.
getContext('2d');
ctx3.lineJoin = 'round';
ctx3.lineWidth = 4;
ctx3.beginPath();
ctx3.moveTo(25,110);
ctx3.lineTo(25,45);
ctx3.lineTo(60,10);
ctx3.lineTo(95,45);
ctx3.lineTo(25,45);
ctx3.lineTo(95,110);
ctx3.lineTo(95,45);
ctx3.lineTo(25,110);
ctx3.lineTo(95,110);
ctx3.stroke();
</script>
<a
d="download3"
href="#"
download="Canvas3.png"
>Download Canvas 3
</a>
<script>
const link3 = document.
getElementById('download3');
link3.href = can3.toDataURL();
</script> | width:
Breite (Standardwert ist 300)
height:
Höhe (Standardwert ist 150)
id:
Identifier
fillStyle:
farblicher Inhalt (Standardwert ist 'black')
fillRect():
Rechteck mit aktuellem fillStyle gefüllt.
lineJoin
Art der Linienverbindung (Standardwert ist 'miter')
lineWidth
Linienbreite (Standardwert ist 1.0)
beginPath()
neuen Linie
moveTo()
Startpunkt
lineTo()
Endpunkt
stroke()
Linie zeichnen
toDataURL()
URL für die Darstellung als Bild (Standard ist 'image/png')
| | Download Canvas 1Download Canvas 2Download Canvas 3 |
|
| © webman-company, 31. Juli 2026
|
|
Startseite
Kalender
