2_5390937242204112261

Давайте изменим файл main. css так, чтобы наш холст выделялся на странице.
Если вы не знакомы с CSS, то это нормально. CSS просто устанавливает ширину
и высоту для нашего элемента HTML, а также добавляет черную границу.5
#mainCanvas {
width: 400рх;
height : 400рх;
border: solid lpx Ыасk;
Если вы перезагрузите свою страницу, то увидите холст.
Получив холст для рисования, давайте подключим библиотеку Paper. j s, чтобы
она помогла нам с рисунком. Сразу после подключения библиотеки jQuery, но
до подключения собственного файла main. j s, добавьте следующую строку.
<script src="https ://cdnj s.cloudflare .com/ajax/libs/paper .js/0.9.24/ l
paper-full .min.js"></script>
Обратите внимание: для подключения библиотеки Paper. j s в наш проект мы используем
CDN, как и в случае с библиотекой jQuery.
Вы уже начали понимать, что порядок подключения очень важен. Поскольку
мы собираемся использовать библиотеки jQuery и Paper. j s
в нашем файле main. j s, обе они подключаются первыми. Ни одна из
них не зависит от другой, поэтому не имеет значения, какая из библиотек
подключается первой, но я всегда подключаю первой библиотеку
jQuery (в силу привычки), поскольку очень многое в веб-разработке зависит
от нее.
Теперь, подключив библиотеку Paper. j s, проделаем небольшую работу по ее
настройке. Подобный часто встречаемый код (повторяющийся перед вашим собственным)
зачастую называют шаблоном (boilerplate). Добавьте следующее в файл
main. js, сразу после 'use strict ' (если хотите, можете удалить console. log):
paper .install (window) ;
paper .setup (document . getElementByid ('mainCanvas '));
// TODO
paper .view. draw ();
В первой строке библиотека Paper. j s устанавливается в глобальную область
видимости (что будет иметь больше смысла в главе 7). Во второй строке библиотека
Paper. j s подключается к холсту и готовится к рисованию. В середине, где мы
5 Всем, кто желает узнать больше о CSS и HTML, я рекомендую бесплатный курс по HTML и CSS
на Codecaderny.
34 Глава 1. Ваше первое приложение