Cienie (HTML5 canvas)

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