Главная RSS Онлайн игры WarCraft Приколы Карта сайта О блоге Поиск Добавить пост Ваши посты
500 рублей помощь регистрации домена и на хосте и перенос сайта туда связь


+ Подписаться

В этой книге представлены основы по HTML 5. В ней рассказывается, как создавать свою графику и анимацию, а так же работа с мышкой и клавиатурой.

Скачать


Создание теней и заполнение градиентной заливки

Добавил: AlexMaster

Дата: 15.09.2016


Заполнение градиентной заливки - Если вам приходилось работать с Photoshop, то там был такой инструмент как Gradient Tool. Теперь в HTML 5 появилась возможность заполнять градиентом нарисованные на холсте фигуры.

Существует два способа заполнения фигур линейный и радиальный. У каждого способа есть своя функция. Для линейного используется функция createLinearGradient, для радиального - createRadialGradient. Благодаря градиентам можно придать объекту более красивый вид.
В листинге 1 создается линейный градиент с помощью метода createLinerGradient, который принимает четыре значения. Первые два значения это начало линии градиента по х и y. Остальные два значения - это где заканчивается линия градиента. В нашем случае градиент начинается в точке (10,0) и заканчивается в точке (400,0). Переход цветов происходит слева на право, если вам нужно сделать переход цветов сверху вниз, то нужно записать так (0,10) и (0,400).
addColorStop – эта функция отвечает за остановку цветов градиента. Принимает два значения. Первое значение задает параметр смещения от 0 до 1. Если 0, то цвет находится в начале градиента. Если 1, то цвет находится в конце градиента. Второе значение это сам цвет, который указывает, каким нужно закрасить начало и конец объекта. В листинге 1 показан пример, как красный цвет, который начинается в точке 0, плавно переходит в желтый цвет, который находится в точке 1. Если указать первый параметр красного цвета 0.8, то около 80 % холста будет красного цвета, а остальное желтого. Скопируйте этот пример в html документ и запустите в браузере. Попробуйте поменять значение, чтобы увидеть результат.
Пример листинг 1.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pong</title>
<script type="text/javascript">
function main()
{
var canvas=document.getElementById("Newcanvas");
var ctx=canvas.getContext("2d");
var gradient=ctx.createLinearGradient(10,0,400,0);
gradient.addColorStop(0,"Red");
gradient.addColorStop(1,"Yellow");
ctx.fillStyle=gradient;
ctx.fillRect(0,0,400,400);
}

</script>
</head>
<body onload="main()">
<canvas id="Newcanvas" width="400px" height="200px">
Please get a new browser.
</canvas>
</body>
</html>

Так же вы можете добавить еще несколько цветов, немного переделав код:
Например:

gradient.addColorStop(0, 'blue');
gradient.addColorStop(0.25, 'purple');
gradient.addColorStop(0.75, 'red');
gradient.addColorStop(1, 'yellow');

Чтобы создать радиальный градиент, нужно в функцию createRadialGradient передать шесть значений:
X1,y1,r1 - координаты и радиус первой окружности.
X2,y2,r2 - координаты и радиус второй окружности.
В целом синтаксис выглядит вот так.
createRadialGradient(x1, y1, r1, x2, y2, r2);
В листинге 2 вы можете увидеть пример использования функции createRadialGradient.
Создается два круга первый в позиции 100x120 по оси координат (x,y), с радиусом 10 px. Второй 100x120 с радиусом 100 px. Дальше с помощью функции addColorStop задаются цвета. Если в предыдущем примере ставилась точка начала цвета и точка конца цвета, а потом от точки A к точке B проводилась градиентная линия, то здесь точка начала считается центр первой окружности и от нее начинает рисоваться радиальный градиент до конечной точке, которая находится у границ второй окружности.
Пример листинг 2.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Radial gradient</title>
<script type="text/javascript">
function main()
{
var can=document.getElementById("Newcanvas");
var ctx=can.getContext("2d");
gradient = ctx.createRadialGradient(100, 120, 10,100, 120, 100);
gradient.addColorStop(0, 'blue');
gradient.addColorStop(0.25, 'orange');
gradient.addColorStop(0.5, 'purple');
gradient.addColorStop(0.75, 'red');
gradient.addColorStop(1, 'white');
ctx.fillStyle=gradient;
ctx.fillRect(0,0,400,400);
}
</script>

</head>
<body onload="main()">
<canvas id="Newcanvas" width="250px" height="250px">
Please get a new browser.
</canvas>
</body>
</html>

При использование радиального градиента можно задать точки первой окружности, за пределами радиуса второй окружности, и получить что-то вроде конуса. Пример можно увидеть на листинге 3.
В этом пример координаты первой окружности находятся x=100, y=40, радиус 10. Вторая окружность находится в точке x=100, y=170, радиус 50. В итоге у нас получится конус. Вы можете скопировать пример из листинга в html документ и протестировать результат в браузере.
Листинг 3.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Radial gradient</title>
<script type="text/javascript">
function main()
{
var can=document.getElementById("Newcanvas");
var ctx=can.getContext("2d");
gradient = ctx.createRadialGradient(100, 40, 10,100, 170, 50);
gradient.addColorStop(0, 'blue');
gradient.addColorStop(0.25, 'orange');
gradient.addColorStop(0.5, 'purple');
gradient.addColorStop(0.75, 'red');
gradient.addColorStop(1, 'white');
ctx.fillStyle=gradient;
ctx.fillRect(0,0,400,400);
}
</script>

</head>
<body onload="main()">
<canvas id="Newcanvas" width="250px" height="250px">
Please get a new browser.
</canvas>
</body>
</html>

Использование теней.


В html 5 у канваса появилась возможность использовать тени для объектов. Пример использования теней вы можете видеть в листинге 4. Для смещения теней существуют переменные shadowOffsetX и shadowOffsetY.
shadowOffsetX – смещает тень по x координат, от позиции объекта. Если координаты объекта x=100, а значение переменной shadowOffsetX=20, то тень объекта будет расположена 120 по x.
shadowOffsetY – смещает тень по y координат, от позиции объекта. То же самое, что и shadowOffsetX, только смещение здесь происходит по y.
shadowBlur – если использовать эту переменную, то тень становится размытой. Чем больше значение, тем более размытой становится тень.
shadowColor – устанавливает цвет тени.
Пример листинге 4

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Использование теней </title>
<script type="text/javascript">
function main()
{
canvas = document.getElementById("drawingCanvas");
ctx = canvas.getContext("2d");
// Рисуем прямоугольник с тенью
ctx.rect(20, 20, 100, 100);
ctx.fillStyle = "#8ED6FF";
ctx.shadowColor = "rgb(190,190,190)";
ctx.shadowBlur = 20;
ctx.shadowOffsetX = 15;
ctx.shadowOffsetY = 15;
ctx.fill();

// Рисуем три строчки текста с тенью
ctx.textBaseline = "top";
ctx.font = "bold 20px Arial";

ctx.shadowBlur = 3;
ctx.shadowOffsetX = 4;
ctx.shadowOffsetY = 4;
ctx.fillStyle = "steelblue";
ctx.fillText("Едва заметная тень.", 10, 175);

ctx.shadowBlur = 5;
ctx.shadowOffsetX = 20;
ctx.shadowOffsetY = 20;
ctx.fillStyle = "blue";
ctx.fillText("Здесь используется \"далекая\" тень...", 10, 225);

ctx.shadowBlur = 20;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowColor = "black";
ctx.fillStyle = "#5B7F00";
ctx.fillText("Эта тень с сильным размытием, без смещения.", 10, 300);
}
</script>
</head>
<body onload="main()">
<canvas id="drawingCanvas" width="800px" height="400px">
</canvas>
</body>
</html>

Иногда при создании html игры нужно отбросить тень от здания или же от персонажа. Для этого нужно загрузить картинку с помощью drawImage (как это сделать я писал здесь) и использовать специальные переменные, чтобы сместить тень и если нужно сделать размытие тени. У загружаемой картинки должно быть расширение .png. Это специальное расширение, которое позволяет сохранить только саму вырезанную картинку. Пустое пространство вокруг картинки сохранено не будет. Пример вы можете видеть в листинге 5.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Использование теней</title>
<script type="text/javascript">
// Определение контекста рисования
function main()
{
canvas = document.getElementById("drawingCanvas");
context = canvas.getContext("2d");

context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowColor = "rgb(150,150,150)";
context.shadowBlur = 4;

var img = new Image();
img.onload = function() {
context.drawImage(img, 250, 30);

};
img.src = "bron.png";
}

</script>
</head>
<body onload="main()">
<canvas id="drawingCanvas" width="400px" height="400px">
</canvas>
</body>
</html>

Все исходники находится в папке
Gradient and shadow.

Назад

Просмотров: 137

Оцените заметку: 1 2 3 4 5

Комментарий к этой заметки:

Добавить ваш камментарий:

Введите капчу

 

Яндекс.Метрика