Войти
s-lub » Учебники » HTML 5 » Оформление текста и изображений в canvas

Оформление текста и изображений в canvas

Оформление текста и изображений в canvas

В этой статье мы рассмотрим, как правильно оформлять текст и вставлять изображение в canvas, а потом подведём итоги.

Текст

Текст в canvas добавляется методом fillText("текст",x,y).

Пример:

<canvas id='draw' style='border:1px solid' width='300' height='150'></canvas>
<script type='text/jаvascript'>
var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
x.fillText("Теперь Вы можете отображать", 15, 40);
x.fillText("произвольный текст", 100, 70);
x.fillText("в элементе canvas.", 60, 120);
</script>

А теперь украсим его с помощью свойства font.

Пример

<canvas id='draw' style='border:1px solid' width='300' height='150'></canvas>
<script type='text/jаvascript'>var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
x.font='15px Verdana';
x.fillStyle='#60016d';
x.fillText("Теперь Вы можете отображать", 10, 40);
x.font='25px Arial';
x.fillStyle='#007439';
x.fillText("произвольный текст", 10, 80);
x.fillStyle='#a67800';
x.font='20px Comic Sans MS';
x.fillText("в элементе canvas.", 50, 120);
</canvas>

Изображения в canvas

В canvas можно вставлять изображения только некоторых форматов, таких как PNG, GIF и JPEG.

Правильно прописывается оно с помощью drawImage('ссылка на картинку',x,y).

Создать ссылку на картинку из скриптов можно с помощью метода document.getElementById (также можно использовать методы getElementsByTagName и images). Если Вы не хотите, чтобы картинка была отображена на странице можно ее просто скрыть с помощью CSS.

Пример

<canvas id='draw' width='400' height='300' style='border:1px solid'>
<img id='image1' src='fon.jpg'/><script>
var img=document.getElementById('image1');
var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
x.drawImage(img,50,50,100,50);
</script>
</canvas>

На этом мы и закончили краткий курс по HTML 5 и canvas.


Все статьи по теме HTML 5:

- HTML 5 Введение
- Устаревшие теги и атрибуты HTML 5
- Нововведения в структуру документа HTML 5
- Глобальные атрибуты в HTML 5
- Формы HTML 5
- Воспроизведение аудио файлов в HTML 5
- Воспроизведение видео файлов в HTML 5
- Web worker
- Геолокация в HTML 5
- Drag and Drop
- Кэширование страниц
- Макет шаблона HTML 5 с пояснениями
- Справочник тегов HTML 5

Canvas:

- Canvas вступление
- Применение стилей в canvas
- Оформление текста и изображений в canvas