Здравствуйте. Есть такой код:
$(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 на русском языке - буду очень и очень признателен. Пробовал искать это дело - но потерпел неудачу..)