Михаил Ботов - Интерактивная анимация HTML5. Методические указания
- Название:Интерактивная анимация HTML5. Методические указания
- Автор:
- Жанр:
- Издательство:Литагент Ридеро
- Год:неизвестен
- ISBN:9785448563058
- Рейтинг:
- Избранное:Добавить в избранное
-
Отзывы:
-
Ваша оценка:
Михаил Ботов - Интерактивная анимация HTML5. Методические указания краткое содержание
Интерактивная анимация HTML5. Методические указания - читать онлайн бесплатно ознакомительный отрывок
Интервал:
Закладка:
//Заливка
context.fillStyle = «#5F5»;
context.fillRect (10,10, 300, 300);
//надпись
context.font = «50px serif»
context.fillStyle = «#FF0000»;
context.fillText («Hello People!», 30, 90);
//фиолетовый прямоугольник
context.fillStyle = «violet»;
context.fillRect (25,25,150,150);
context.strokeStyle = «gray»; // цвет линии
context.lineWidth = 6; // толщина линии
context.strokeRect (150,150,150,150); // прямоугольник
context.clearRect (100,100,150,150); // очищаем прямоугольную область
Пример градиентной заливки
$ (function () {
var canvas = document.getElementById («myCanvas»);
var context = canvas.getContext («2d»);
//Линейный градиент
context.fillStyle = «#000000»;
var gradient = context.createLinearGradient (5,45,150,150);
gradient.addColorStop (0.0,«#00FF00»);
gradient.addColorStop (0.471428571, «#FF0000»);
gradient.addColorStop (1.0,«#0000FF»);
context.fillStyle = gradient;
context.fillRect (25,25,150,150);
//Радиальный градиент
var rad_grad = context.createRadialGradient (250,250,1, 150,250,120);
rad_grad.addColorStop (0,«#F00»);
rad_grad.addColorStop (0.5,«#0F0»);
rad_grad.addColorStop (1,«#00F»);
context.fillStyle = rad_grad;
context.fillRect (150,150,200,200);
});
Пример отрисовки фигуры «звезда»
//star
context.strokeStyle = «red»;
context.lineWidth = 10;
context.beginPath ();
context.moveTo (50,100);
context.lineTo (240,100);
context.lineTo (70,230);
context.lineTo (140,30);
context.lineTo (220,230);
context.closePath ();
context.stroke ();
Пример рисования кривой Безье
context.strokeStyle = «red»;
context.lineWidth = 7;
context.beginPath ();
context.moveTo (300, 400);
context. quadraticCurveTo (400, 500, 450,300);
//context.closePath ();
context.stroke ();
На «холст» можно загружать и уже имеющиеся растровые изображения из файлов. Для этого существует функция drawImage () . Ниже пример ее использования.
Конец ознакомительного фрагмента.
Текст предоставлен ООО «ЛитРес».
Прочитайте эту книгу целиком, на ЛитРес.
Безопасно оплатить книгу можно банковской картой Visa, MasterCard, Maestro, со счета мобильного телефона, с платежного терминала, в салоне МТС или Связной, через PayPal, WebMoney, Яндекс.Деньги, QIWI Кошелек, бонусными картами или другим удобным Вам способом.
Интервал:
Закладка: