Рисование на холстеКак мы уже говорили в лекциях, < canvas >; создаёт поверхность для рисования, предоставляющую один или более контекст отрисовки, который используется для создания отображаемого контента и манипуляций с ним. В настоящее время единственным определенным контекстом отрисовки является двумерный контекст. Элемент < canvas > изначально пустой, и для того, чтобы что-либо отобразить, скрипту необходимо получить контекст отрисовки и рисовать уже на нём. Элемент canvas имеет DOM-метод, называемый getContext, и предназначенный для получения контекста отрисовки вместе с его функциями рисования. getContext() принимает один параметр - тип контекста. Осуществляется все вышесказанное следующим образом, в рамках JavaScript – функции: var canvas = document.getElementById("lesson6"); var ctx = canvas.getContext("2d") 24.3. Первая строка приведенного создает переменную, фактически являющуюся созданным нами холстом. Вторая – получает доступ к контексту рисования. Теперь создадим наше первое изображение – прямоугольник багрового цвета. Для этого, во – первых, создадим JavaScript – функцию (не забыв "привязать" файл веб – сценариев к html - странице): function createImage() { var canvas = document.getElementById("lesson6"); var ctx = canvas.getContext("2d"); } 24.4. Прямоугольную закрашенную область можно нарисовать при помощи функции fillRect (x,y,w,h), где x и y – координаты левой верхней вершины прямоугольника (по горизонтали и вертикали соответственно), а w и h – значения ширины и высоты прямоугольника, соответственно. Функция strokeRect (x,y,w,h) рисует границы прямоугольника, clearRect (x,y,w,h) – очищает заданную прямоугольную область. Функция fillStyle задает цвет рисования. Таким образом, итоговая функция будет выглядеть так: function createImage() { var canvas = document.getElementById("lesson6"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(100,0,0)" ctx.fillRect (20, 10, 50, 70); } 24.5. Функция готова, холст уже давно размещен на странице, осталось обеспечить выполнение функции. Для того, чтобы изображение отрисовывалось в момент загрузки страницы, добавим в тег <body> вызов функции createImage при загрузке. html – код нашего примера будет выглядеть следующим образом: <body onload="createImage();"> <canvas id="lesson6" width="150" height="150"></canvas> </body> 24.7. Открыв страницу в браузере, увидим:
Самостоятельно нарисуйте изображения, приведенные в задании.
|
