HTML 5 und Canvas

Nächste Frage Vorherige Frage Zeige Lösung an Gesamtpunktzahl

Es geht um Canvas und die Canvas-Unterstützung durch aktuelle Browser. Richtige Aussagen bitte ankreuzen.
Zu Canvas gehören Methoden für fillRect, strokeRect, clearRect, beginPath, closePath, stroke, fill, moveTo, lineTo, arc, quadraticCurveTo, bezierCurveTo, rect
In diesen Zusammenhang meint Canvas (engl.) etwa die "Zeichenfläche".
In diesen Zusammenhang meint stroke (engl.) etwa "Zeichnen mit dem Zeichenstift"
2012 unterstützen die aktuellen Browser die HTML5-Canvas-Grafik-Funktionalitäten als 3D Grafik-System.
Zum Rendern von HTML5-Canvas-Rechtecken werden Tags verwendet, wie etwa
<rect 
  x="100"
  y="200"
  width="150"
  height="200"
  stroke="navy"
  stroke-width="10"
  fill="yellow"
/>
Zum Rendern von HTML5-Canvas wird ein Browser mit aktiviertem ECMAScript (JavaScript) gebraucht.
Es geht um HTML 5 Canvas. Das canvas-Tag habe id="MYCANVAS", etwa
<canvas id="MYCANVAS">Browser kann kein Canvas</canvas>
Richtige Aussagen bitte ankreuzen.
Oft verwendet das Canvas-Tag die default-Weite von 300x300 Pixel.
Nutzerspezifisch kann die Canvas-Tag-Fläche mit width="..." und height="..." angelegt werden.
Das Canvas-Tag kann einen Style, wie z.B.style="border:1px solid" verwenden.
Der grafische Canvas-Kontext ctx kann erhalten werden mit
var ctx = document.getElementById("MYCANVAS").getContext('2d');
Das folgende Code-Fragment
<canvas id="SCHATTEN" width="300" height="100">Browser kann kein Canvas</canvas>
<script>
var ctx = document.getElementById("SCHATTEN").getContext("2d");

ctx.fillStyle = "rgb(192,192,192)"; ctx.fillRect(0,0, 300,100);
ctx.strokeStyle   = "#009";
ctx.lineWidth     = "12";         ctx.strokeRect(10,10,120,80);
ctx.shadowOffsetX = "5";
ctx.shadowOffsetY = "2";
ctx.shadowBlur    = "8";
ctx.shadowColor   = "#000";      ctx.strokeRect(160,10,120,80);
</script>
soll die folgende Anzeige ergeben.
Browser kann kein Canvas Welche der folgenden Aussagen sind richtig?
Die Funktion ctx.fillRect(a,b,c,d); verwendet für a den linken Canvas-Randabstand, für b den oberen Canvas-Randabstand, für c die Breite und für d die Höhe des zu gefüllenden Rechteckes.
Bei der Funktionen ctx.fillRect(a,b,c,d); muß stets ctx.beginPath();...ctx.closePath(); verwendet werden
Der Füllfarbe von ctx.fillStyle = "rgb(192,192,192)"; entspricht die alternative Schreibweise "#ccc".
12 ist eine Zahl (number) und "12" ist ein String. Weil die Linienbreite 12 eine Zahl (number) sein muß, führt ctx.lineWidth = "12"; zu einem Fehler.
Weil das rechte (nicht das linke!) Rechteck einen Schatten hat, müssen die beiden obigen Funktionen ctx.strokeRect(10,10,120,80); und ctx.strokeRect(160,10,120,80); vertauscht werden.
ctx.shadowBlur beschreibt u.a. die "weichgezeichnete Breite" des Schatten.
Es geht um geometrische 2D-Transformationen.
ctx.translate(ti,tj) entspricht der Matrix
[1,   0,  0]
[0,   1,  0]
[ti,  tj,  1]
ctx.rotate(w) entspricht der Matrix
[c,  s,  0]      mit c = cos(w); s = sin(w);
[-s,  c,  0]
[0,  0,  1]
ctx.scale(si,sj) entspricht der Matrix
[si,  0,  0]
[0, sj,  0]
[0,  0,  1]
HTML 5 sieht keine ctx.getTransform() Funktion vor, wohl aber ctx.setTransform(m11, m12, m21, m22, dx, dy), die etwa entspricht:
[m11, m12, 0]
[m21, m22, 0]
[ti,  tj,  1]

mit 

    i_neu = i * m11 + j * m21 + ti,
    j_neu = i * m12 + j * m22 + tj