Форум

Valdemor · #1 (**permalink**) 24.08.2012, 16:54

Так как 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 под цвет текста

dmitry111 · #2 (**permalink**) 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 · #3 (**permalink**) 25.08.2012, 00:26

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

Форум

Справочник

Discord чат

Курсы javascript