Пять градиентных квадратов и линий ⇐ Html

[Anonymous]

Я написал следующий код из учебника, написанного в книге под названием «HTML5 Canvas for Dummies: < /p>


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>
Код, который я написал, должен был показать пять квадратов и одну строку с разными градиентами, но по некоторым причинам изображения в Canvas не показываются. Я хотел бы знать, что я сделал не так. Некоторые честные отзывы будут оценены.


Подробнее здесь: https://stackoverflow.com/questions/795 ... s-and-line