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();