Элемент canvas похож на остальные теги HTML, за тем исключением, что наполняется он и отображается с помощью JS. Для использования canvas вы должны поместить его внутрь HTML документа, получить к нему доступ с помощью JS и выполнить визуализацию.
При использовании canvas нужно понимать разницу между элементом холст и его контекстом. Элемент холст — это то, что встроено внутрь HTML (узел DOM), а контент — это объект, у которого существуют методы и свойства для визуализации. Контекст может быть 2D и 3D.
Холст может иметь только один контекст. Повторный вызов контекста вернет ссылку на тот контекст, который уже существует.
Создание canvas и получение контекста
Для создания canvas в HTML добавьте код:
|
1 |
<canvas></canvas> |
По-умолчанию canvas имеет разрешение 300x150px. Однако разрешение холста можно менять. Для этого пропишем:
|
1 |
<canvas id="cnvs" width="400px" height="200px"></canvas> |
Получить доступ к контексту и canvas можно с помощью команд в JS
|
1 2 |
var canvas=document.getElementById('cnvs'); var ctx = canvas.getContext('2d'); |
Для удобства нашей работы добавим сетку с ячейкой 50px в качестве фона. Для этого скачайте сетку, скопируйте ее в папку с html и js файлами и пропишите следующий CSS код.
|
1 2 3 4 5 6 |
#cnvs { width: 400px; height: 200px; border: 1px solid red; background: url(setka.png); } |
Результат работы показан ниже:
See the Pen Canvas JS by Alex (@Asmodey) on CodePen.
Определяем координаты мыши в Canvas
Рассмотрим пример, который позволяет легко определить координаты мыши в canvas (наведите мышь на холст, пример не работает в FF):
See the Pen Определяем координаты внутри canvas by Alex (@Asmodey) on CodePen.
Смотрите наш урок вкладки на JS
