Fünf Gradientenquadrate und Linie ⇐ HTML

[Anonymous]

Ich habe den folgenden Code aus einem Tutorial geschrieben, das in einem Buch mit dem Titel "HTML5-Leinwand für Dummies: < /p>


geschrieben wurde.window.onload = function() {
canvas = document.getElementById("canvasArea");
context = canvas.getContext("2d");

var xPos = 20;
var yPos = 20;
var gap = 20;
var width = 80;
var height = 80;

context.shadowOffsetX = 4;
context.shadowOffsetY = 4;
context.shadowBlur = 3;
context.shadowColor = "gray";
context.lineWidth = 4;

// var (gradLH)(gradLV)(gradLD) = context.createLinearGradient(start x, start y, end x, end y);
// var (gradRC)(gradRO) = context.createRadialGradient(inner circle x, inner circle y, inner circle radius, outer circle x, outer circle y, outer circle radius)
var gradLH = context.createLinearGradient(20, 0, 100, 0);
var gradLV = context.createLinearGradient(0, 0, 0, 100);
var gradLD = context.createLinearGradient(xPos + (2 * width) + (2 * gap), yPos, xPos + 220 + width, yPos + height);
var gradRC = context.createRadialGradient(xPos + (3 * width) + (3 * gap) + (width / 2), yPos + (height / 2), 5, xPos + (3 * width) + (3 * gap) + (width / 2), yPos + (height / 2), 50);
var gradRO = context.createRadialGradient(xPos + (4 * width) + (4 * gap) + (width / 4), yPos + (height / 2), 15, xPos + (4 * width) + (4 * gap) + (width / 2), yPos + (height / 2), 40);

gradLH.addColorStop(0, "deeppink");
gradLH.addColorStop(.3, "orange");
gradLH.addColorStop(.6 "lime");
gradLH.addColorStop(1, "yellow");
gradLV.addColorStop(0, "red");
gradLV.addColorStop(.4, "blueviolet");
gradLV.addColorStop(1, "gold");
gradLD.addColorStop(0, "fuchsia");
gradLD.addColorStop(.5, "orange");
gradLD.addColorStop(1, "springgreen");
gradRC.addColorStop(0, "red");
gradRC.addColorStop(.5, "turquoise");
gradRC.addColorStop(1, "olive");
gradRO.addColorStop(0, "yellow");
gradRO.addColorStop(.7, "magenta");
gradRO.addColorStop(1, "limegreen");

context.fillStyle = gradLH;
context.fillRect(xPos + (0 * width) + (0 * gap), yPos, width, height);
context.fillStyle = gradLV;
context.fillRect(xPos + (1 * width) + (1 * gap), yPos, width, height);
context.fillStyle = gradLD;
context.fillRect(xPos + (2 * width) + (2 * gap), yPos, width, height);
context.fillStyle = gradLD;
context.moveTo(xPos, yPos + height + gap);
context.lineTo(xPos + (5 * width) + (4 * gap), yPos + height + gap);
context.fillStyle = gradRC;
context.fillRect(xPos + (3 * width) + (3 * gap), yPos, width, height);
context.fillStyle = gradRO;
context.fillRect(xPos + (4 * width) + (4 * gap), yPos, width, height);
}< /code>


< /code>
< /div>
< /div>
< /p>
Der von mir geschriebene Code sollte fünf Quadrate und eine Zeile mit verschiedenen Gradienten zeigen, aber aus einigen Gründen werden die Bilder in der Leinwand nicht angezeigt. Ich würde gerne wissen, was ich falsch gemacht habe. Ein ehrliches Feedback wäre geschätzt.