Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Html5 canvas и наследование теней у элементов. (https://javascript.ru/forum/xhtml-html-css/36684-html5-canvas-i-nasledovanie-tenejj-u-ehlementov.html)

Mike_Kharkov 24.03.2013 17:51

Html5 canvas и наследование теней у элементов.
 
Здравствуйте. Есть такой код:
$(document).ready(function() {

var canvas, ctx, w, h;
	             function init(){
	             canvas = document.getElementById('canvas');
	             w = canvas.width;
	             h = canvas.height;
	             ctx = canvas.getContext('2d');
	             ctx.lineWidth = 0;
	             ctx.strokeRect(0,0,w,h);
	             
	             ctx.beginPath();
	             ctx.lineWidth = 2;
	             ctx.strokeStyle="red";
	             ctx.strokeRect(48,48,200,200);
	             ctx.shadowColor = "red";
	             ctx.shadowOffsetX=2;
	             ctx.shadowOffsetY=2;
	             ctx.shadowBlur = 9;
	             
	             ctx.beginPath();
	             ctx.fillStyle="#CC9933";
	             ctx.rect(48,48,200,200);
	             ctx.fill();
	             
	             ctx.beginPath();
	             ctx.fillStyle="blue";
	             ctx.rect(48,48,100,100);
	             ctx.shadowColor = "#c0c0c0";
	             ctx.shadowOffsetX=12;
	             ctx.shadowOffsetY=12;
	             ctx.shadowBlur = 30;
	             ctx.fill();
	             
	             ctx.beginPath();
	             ctx.shadowColor = "#CC9933";
	             ctx.shadowBlur = 40;
	             ctx.shadowOffsetX=7;
	             ctx.shadowOffsetY=7;
	             ctx.fillStyle="#CC9933";
	             ctx.font="400 15px orbitronio";
	             ctx.fillText("First",74,92);
	             ctx.fillText("Sector",66,112);
	             
	             
	             
};

init();

}); // Конец ready...

<!DOCTYPE html>
<html>
<head>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Introduction in Canvas</title>
	<link href="style.css" type="text/css" rel="stylesheet">
	<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script src="script.js" type="text/javascript"></script>
	
</head>
<body>
		<canvas id="canvas" width="298" height="298">
			           Not Support Canvas
		</canvas>
	
	
</body>
</html>


Вопрос:
Почему шрифт на холсте наследует тень синего блока?
(Как этого избежать?)
Задаю другие параметры тени для шрифта и реакции никакой не следует. (Почему?) :)

P.S. Только начинаю осваивать данное направление - поэтому знаю только его основы.
Буду благодарен за любой совет.
(Если кто подскажет ссылку на книгу по HTML5 CANVAS на русском языке - буду очень и очень признателен. Пробовал искать это дело - но потерпел неудачу..)

dmitriymar 24.03.2013 18:15

Цитата:

Сообщение от Mike_Kharkov
Вопрос:
Почему шрифт на холсте наследует тень синего блока?
(Как этого избежать?)
Задаю другие параметры тени для шрифта и реакции никакой не следует. (Почему?)

1 переопределять их
2 закрывать пути http://www.w3schools.com/tags/canvas_closepath.asp

Mike_Kharkov 24.03.2013 18:31

Цитата:

Сообщение от dmitriymar (Сообщение 242369)
1 переопределять их
2 закрывать пути http://www.w3schools.com/tags/canvas_closepath.asp

Большое Спасибо!

Mike_Kharkov 24.03.2013 19:07

Цитата:

Сообщение от Дзен-трансгуманист (Сообщение 242381)
[html run height=340]
HTML Canvas 2D Context
W3C Working Draft 25 May 2011


Не самая актуальная спецификация, но можно сказать, что это база. Для того чтобы взять старт - самое оно. Я осилил 3 дня.

Спасибо!
P.S. К сожалению в инглише я не силён - поэтому и просил книги именно на русском.
(но всё равно спасибо!)

Mike_Kharkov 24.03.2013 19:26

Ok. Понял. :)


Часовой пояс GMT +3, время: 20:26.