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ół.

Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"

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

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *