|
Добрый день. Я сейчас прохожу курс повышения квалификации - "Профессиональное веб-программирование". Мне нужно получить диплом по этому курсу. Я так полагаю нужно его оплатить чтобы получить диплом о повышении квалификации. Как мне оплатить этот курс?
|
Инспектор
Вы можете этот курс.
Опубликован: 01.08.2012 | Уровень: для всех | Доступ: платный | ВУЗ: Томский политехнический университет
Лекция 19:
HTML5. Работа с Canvas
Аннотация: Добавление canvas на страницу.
Рисование простейших фигур.
Работа с цветом и толщиной линий.
Работа с положением пера.
Рисование прямых линий.
Рисование дуг и кривых.
Рисование кривых Безье.
Вывод текста.
Ключевые слова: HTML, таблица стилей, атрибут, браузер, прямоугольник, JavaScript, Canvas, координаты, R-квадрат, контур, RGB, RGBA, RED, ПО, строковый, пиксел, выражение, прямой, stroke, дуга, arc, Окружность, значение, rounding, square, miter, место, параметр, шрифт, Font, Left, center, Top, hang, alphabetize, ideographic, 'bottom', список
Рисование на холсте осуществляется при помощи вызова функций и методов веб – сценариев. Рассмотрим способы формирования различных изображений.
Добавление элемента canvas на страницу
Как мы уже отмечали, достаточно прописать в HTML – коде следующее, чтобы разместить холст на странице:
<canvas height="200" width="200"></canvas>
В случае, если значения ширины и высоты холста задаются в таблице стилей, то и размещаемое на холсте изображение будет автоматически масштабироваться соответствующим образом.
Для упрощения работы добавим рамку, окружающую холст и зададим атрибут id.
<canvas id="canvas" style="border: 2px solid black" width="200" height="200"> </canvas>
В браузере наш холст будет отображен следующим образом:
Рисование простейших фигур
Прямоугольники
Для отрисовки прямоугольных фигур используются методы strokeRect для прямоугольника без заливки цветом, и fillRect для прямоугольника залитого цветом.
Для иллюстрации примеров лекции, создадим HTML – файл, для простоты разместим JavaScript код в рамках самой страницы:
<html>
<head>
<script type="application/x-javascript">
function createImage()
{
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
}
</script>
</head>
<body onload="createImage();">
<canvas id="canvas" style="border: 2px solid black" width="200" height="200"> </canvas>
</body>
</html>
Функция createImage вызывается при загрузке тела html – документа. В рамках самой функции мы получаем ссылку на сам холст (canvas) и ссылку на контекст (ctx).
Рассмотрим подробнее метод и его параметры:
strokeRect (x,y,w,h)
x и y – координаты верхней левой вершины прямоугольника (по горизонтали и вертикали соответственно);
w и h – ширина и высота прямоугольника соответственно.
Метод fillRect принимает те же параметры, что и strokeRect.
Изменим функцию createImage следующим образом, для отрисовки двух квадратов:
function createImage()
{
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.strokeRect(20,20,50,50);
ctx.fillRect(80, 80, 50, 50);
}
В результате, получим холст:
Метод clearRect, принимающий те же параметры, что fillRect и strokeRect, позволяет очистить прямоугольную область. Добавим следующую строку в метод createImage:
ctx.clearRect(50,50,50,50);
В результате холст изменится таким образом:
Сергей Крупко
Галина Башкирова
|
Здравствуйте, недавно закончила курс по проф веб программиованию, мне прислали методические указания с примерами тем, однако темы там для специальности Системный администратор информационно-коммуникационных» систем.
|
