Page 36 - Браун Э. - Изучаем JavaScript. Руководство по созданию современных веб-сайтов - 2017

Давайте изменим файл main . s s так, чтобы наш холст выделялся на странице.
c
Если вы не знакомы с CSS, то это нормально. CSS просто устанавливает ширину
и высоту для нашего элемента HTML, а также добавляет черную границу.5

#mainCanvas {
width : 4 0 0 рх ;
height : 4 0 0 рх;
border : solid lpx Ыасk;

Если вы перезагрузите свою страницу, то увидите холст.
e
Получив холст для рисования, давайте подключим библиотеку Pap r . j s, что­
бы она помогла нам с рисунком. Сразу после подключения библиотеки jQuery, но
до подключения собственного файла main . j s, добавьте следующую строку.
<script src="https : / /cdnj s . cloudflare . c om/ajax/libs/paper . j s / 0 . 9 . 2 4 / l
paper-full . m i . j s " > </script>
n
Обратите внимание: для подключения библиотеки Paper . j s в наш проект мы ис­
пользуем CDN, как и в случае с библиотекой jQuery.

Вы уже начали понимать, что порядок подключения очень важен. По­
скольку мы собираемся использовать библиотеки jQuery и Pape . j s
r
в нашем файле ma n . j s, обе они подключаются первыми. Ни одна из
i
них не зависит от другой, поэтому не имеет значения, какая из библио-
тек подключается первой, но я всегда подключаю первой библиотеку
jQuery (в силу привычки), поскольку очень многое в веб-разработке за­
висит от нее.

Т е перь, подключив библиотеку Pap r . j s, проделаем небольшую работу по ее
e
настройке. Подобный часто встречаемый код (повторяющийся перед вашим соб­
ственным) зачастую называют шаблоном (boilerplate). Добавьте следующее в файл
j
main. s , сразу после ' u se strict ' (если хотите, можете удалить console . log):
paper . i nstall ( w indow) ;
paper . s etup ( d ocument . getElementByid ( ' mainCanvas ' ) ) ;

/ / TODO

paper . v iew . draw ( ) ;
В первой строке библиотека Pap r . j s устанавливается в глобальную область
e
видимости (что будет иметь больше смысла в главе 7). Во второй строке библио­
r
тека Pape . j s подключается к холсту и готовится к рисованию. В середине, где мы

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

34 Глава 1. Ваше первое приложение