Fünf Gradientenquadrate und LinieHTML

HTML-Programmierer
Anonymous
 Fünf Gradientenquadrate und Linie

Post by 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.

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post