Cienie

Cienie ustala się wykorzystując cztery właściwości:

  • shadowColor – kolor cienia
  • shadowBlur – stopień rozmycia cienia (liczby całkowite
    dodatnie lub ujemne)
  • shadowOffsetX – przesunięcie cienia na osi X w stosunku do
    figury – liczby całkowite dodatnie lub ujemne
  • shadowOffsetY – przesunięcie cienia na osi Y w stsunku do
    figury – liczby całkowite dodatnie lub ujemne

Są to właściwości kontekstu, a więc następna rysowana figura będzie miała
cień z ostatnio podanymi właściwościami.

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");
	ctx.rect(20, 20, 200, 100);
	ctx.fillStyle = "#8EF6FF";
	ctx.shadowColor = "#bbbbbb";
	ctx.shadowBlur = 20;
	ctx.shadowOffsetX = 15;
	ctx.shadowOffsetY = 15;
	ctx.fill();
	ctx.shadowBlur = 5;
	ctx.shadowOffsetX = 5;
	ctx.shadowOffsetY = 5;
	ctx.fillStyle = "black";
	ctx.font = "1.5em sans-serif";
	ctx.fillText("Ten napis ma delikatny cień ... ", 10, 225);	
	ctx.beginPath();
	ctx.moveTo(140, 300);
	ctx.quadraticCurveTo(440, 210, 340, 400);
	ctx.lineWidth = 2;
	ctx.strokeStyle = 'blue';
	ctx.shadowColor = "red";
	ctx.shadowBlur = 15;
	ctx.shadowOffsetX = 5;
	ctx.shadowOffsetY = 5;
	ctx.stroke();		
            

Dodaj komentarz

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