Gradient radialny (4)
Prostokąt pokrywający się wymiarami z canvas wypełniamy
gradientem kołowym rozpościerającym się między małym białym kołem, a
dużym kołem niebieskim.
Na lini łączącej środki kół umieszczono trzy kolory: czerwony,
zielony i żółty.
Ponieważ kolor niebieski nie ma ogranicznika, rozciąga się do
brzegów płótna, ale tylko w obrębie powierzchni wyznczonej przez
proste – styczne do obu kół.
Listing
var cv = document.getElementById("canvas");
var ctx = cv.getContext("2d");
var w = cv.width;
var h = cv.height;
var grd = ctx.createRadialGradient(50, 50, 20, 250, 150, 50);
grd.addColorStop(0, "white");
grd.addColorStop(0.25, "red");
grd.addColorStop(0.5, "green");
grd.addColorStop(0.75, "yellow");
grd.addColorStop(1, "blue");
ctx.fillStyle = grd;
ctx.rect(0, 0, w, h);
ctx.fill();