Михаил Ботов - Интерактивная анимация 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 Кошелек, бонусными картами или другим удобным Вам способом.