Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   html5. Canvas (https://javascript.ru/forum/xhtml-html-css/31050-html5-canvas.html)

Valdemor 24.08.2012 16:54

html5. Canvas
 
Так как canvas относится к html и к javascript одновременно, то я выбрал верный форум.
В canvas можно делать тени. Вопрос: как их сбросить?
То есть, есть у меня код:
var canvas = document.getElementById('Game');
var cube = canvas.getContext("2d");

cube.filleStyle = "#000";
cube.font = "normal 12pt Calibri";
cube.fillText("Текст без тени", 0, 10);
cube.shadowColor = "#000";
cube.shadowOffsetX = 1;
cube.shadowOffsetY = 1;
cube.shadowBlur = 3;cube.filleStyle = "#000";
cube.font = "normal 12pt Calibri";
cube.fillText("Текст с тенью", 0, 30);
cube.filleStyle = "#000";
cube.font = "normal 12pt Calibri";
cube.fillText("Текст без тени", 0, 50);
, но последний текст также с тенью. Как мне это исправить?
Добавлять тень лишь в конце? Или делать shadowBlur = 0 и shadowColor под цвет текста:help:

dmitry111 25.08.2012 00:20

Это можно сделать разными способами, например c помощью методов save() и restore() так:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>выпвып</title>
</head>

<body>
<canvas id="Game"></canvas>
<script>
    var canvas = document.getElementById('Game');
    var cube = canvas.getContext("2d");


    cube.filleStyle = "#000";
    cube.font = "normal 12pt Calibri";
    cube.fillText("Текст без тени", 0, 10);
    cube.save();

    cube.shadowColor = "#000";
    cube.shadowOffsetX = 1;
    cube.shadowOffsetY = 1;
    cube.shadowBlur = 3;cube.filleStyle = "#000";
    cube.font = "normal 12pt Calibri";
    cube.fillText("Текст с тенью", 0, 30);

    cube.restore();
    cube.filleStyle = "#000";
    cube.font = "normal 12pt Calibri";
    cube.fillText("Текст без тени", 0, 50);



</script>
</body>
</html>

Valdemor 25.08.2012 00:26

Огромное спасибо!


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