18.Использование градиентов Для создания градиента используются два метода createLinearGradient – для линейного градиента и createRadialGradient – для создание кругового градиента.

Метод createLinearGradient(x1,y1,x2,y2) создает объект линейного градиента и принимает 4 аргумента: x1,y1 – координаты первой точки отрезка x2,y2 – координаты второй точки отрезка. На этом отрезке, с помощью свойства объекта градиента addColorStop(position, color) нужно определить положение точки привязки цвета. Position – определяет положение цвета в градиенте. Значение должно быть в диапазоне 0.0 (начало) до 1.0 (конец), color - color — имя или код цвета, или его rgb/rgba представление. Например, если r=0, то точка привязки цвета имеет координаты (x1,y1), r=1, точка привязки имеет координаты (x2,y2). На отрезке между этими точками с помощью смешивания этих цветов будет создан плавный переход между ними.

После создания градиента и привязки к нему цветов, можно будет использовать градиент в качестве стиля, например так: ctx.fillStyle = lineargradient;

var lingrad = ctx.createLinearGradient(150,0,150,150);

lingrad.addColorStop(0,"red");

lingrad.addColorStop(1,"white");

ctx.fillStyle = lineargradient;

ctx.fillRect(0,0,150,150);

Принцип действия функции createRadialGradient(x1,y1,r1,x2,y2,r2) такой же, как и createLinearGradient, Функция принимает 6 параметров x1,y1,r1 — координаты центра и радиус первой окружности x2,y2,r2 — координаты центра и радиус второй окружности.

var radgrad = ctx.createRadialGradient(105,105,20,112,120,50);

radgrad.addColorStop(0,"red");

radgrad.addColorStop(1,"white");

ctx.strokeStyle = radgrad ;

Так же как и в случае линейных градиентов, цвета привязываются к точкам на воображаемых линиях. Допустим t1(x1+ r1, y1) – точка на первой окружности а t2(x2+ r2, y2) – точка на второй окружности . Пусть t1’(штрих) –точка, лежащая на первой окружности и полученная поворотом относительно центра окружности на какой-нибудь угол, а t2’(штрих) –точка на второй окружности, полученная поворотом центра окружности на этот же угол. Если соединить t1’(штрих) и t2’(штрих), то параметр position метода addColorStop(position, color) это доля расстояния от t1’(штрих) до t2’(штрих) для привязки цвета color.

19.Шаблон html страницы, использование сценариев.

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Заголовок</title> <link rel="style" href="style.css"><!--подключение файла со стилями--> <script src="script.js"></script><!--для внешних скриптов--> </head> <body> </body> </html>

• Элемент <!DOCTYPE> предназначен для указания типа текущего документа. Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. 

• Тег <html> определяет начало HTML-файла, внутри него хранится заголовок (<head>) и тело документа (<body>)

• Тег <head> предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Также внутри контейнера <head> находятся метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.Содержимое тега <head> не отображается напрямую на веб-странице, за исключением тега <title>устанавливающего заголовок окна веб-страницы..

• Тег <meta> является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.

• Элемент <body> предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера<body>. К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д. Часто тег <body> используется для размещения обработчика событий, например, onload, которое выполняется после того, как документ завершил загрузку в текущее окно или фрейм.

• Тег <link> используется для подключения css-файлов со стилями элементов страницы, а тег <script> - для подключения js-файлов, содержащих реализованные на страние сценарии. Вообще сценарии можно непосредственно встраивать в html-страницу с помощью тега <script>, однако их разграничение считается «хорошим тоном» в программировании.

Использование сценариев.

Сценарий или скрипт – это блок кода, построчно считываемый и выполняемый браузером и используемый для динамического изменения html-страницы. Сценарии могут размещаться в четырех различных частях документа HTML.

• В теле документа. В этом случае результат Сценария отображается на вэб-странице при ее загрузке в браузере.

• В заголовке документа между парой тегов HEAD. Сценарий, размещенный в заголовке, не выполняется сразу при загрузке страницы, а используется другими сценариями В этом случае он используется как функция - группа операторов JavaScript, выполняемых как одно целое.

• В теге HTML. Такая конструкция называется обработчиком событий и позволяет выполнять сценарий вместе с тегом. Обработчик событий представляем собой отдельный тип сценария, который не требует использования дескриптора <SCRIPT> для его обозначения.

• В отдельном файле. JavaScript позволяет создавать собственные файлы с расширением .js , содержащие сценарии. В этом случае сценарий указывается в коде документа в виде имени файла, приведенного между дескрипторами <SCRIPT>.