Интерактивная анимация HTML5. Методические указания - страница 4

Шрифт
Интервал



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 (). Ниже пример ее использования.

Конец ознакомительного фрагмента.