В этой статье мы рассмотрим, как правильно оформлять текст и вставлять изображение в canvas, а потом подведём итоги.
Текст
Текст в canvas добавляется методом fillText("текст",x,y).
Пример:
<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.
Пример
<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.
Пример
<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