Параметры. Метод createRadialGradient

Масштабирование

Параметры

Базовый

Метод drawImage

Пример

Параметры

Синтаксис

Метод createRadialGradient

Пример

Параметры

Синтаксис

Метод createPattern

Пример

Синтаксис

Метод closePath

Пример

Параметры

Синтаксис

clearRect(x,y,width,height)

·x и y — координаты левого верхнего угла прямоугольника;

·width — ширина прямоугольника;

·height — высота прямоугольника.

Все параметры обязательны, должны быть положительными числами.

Javascript

ctx.fillRect(50,50,100,50);

ctx.strokeRect(120,100,100,50);

ctx.clearRect(100,70,50,50);

Замыкаем контур: последняя точка контура соединяется с первой. Текущее положение на холсте перемещается туда же. Начало контура определяется beginPath().

closePath()

Javascript

/* черная линия */

ctx.beginPath();

ctx.moveTo(50,50);

ctx.lineTo(50,100);

ctx.lineTo(100,100);

ctx.lineWidth = 1;

ctx.strokeStyle = "black";

ctx.stroke();

/* красный треугольник */

ctx.beginPath();

ctx.moveTo(100,100);

ctx.lineTo(100,200);

ctx.lineTo(200,200);

ctx.closePath();

ctx.lineWidth = 5;

ctx.strokeStyle = "red";

ctx.stroke();

позволяет размножать изображение.

createPattern(image,type)

·image — объект Image();

·type — строка соответствующая одному из значений: repeat, repeat-x, repeat-y и no-repeat.

Результат появится на холсте после применения метода fill() или stroke().

Перед применением метода следует убедиться, что изображение загружено.

Javascript

var canvas = document.getElementById("picture");

var ctx = canvas.getContext("2d");

var img = new Image();

img.src = "path-to/mobil.png";

img.onload = function(){

var ptrn = ctx.createPattern(img,"repeat");

ctx.fillStyle = ptrn;

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

}

Создает объект радиального градиента.

createRadialGradient(x1,y1,r1,x2,y2,r2)

·x1,y1,r1 — координаты центра и радиус первой окружности;

·x2,y2,r2 — координаты центра и радиус второй окружности.

После создания объекта градиента, можно ему присвоить цвета с помощью метода addColorStop. Градиент появится на холсте после применения метода fill() или stroke().

Javascript

var canvas = document.getElementById("picture");

var ctx = canvas.getContext("2d");

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

radgrad.addColorStop(0, "#FF5F98");

radgrad.addColorStop(0.75, "#FF0188");

radgrad.addColorStop(1, "rgba(255,1,136,0)");

ctx.fillStyle = radgrad;

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

Подготовил: Евгений Рыжков Дата публикации: 14.10.2011

Выводит изображение на хосте. Имеет несколько вариантов синтаксиса с разными назначениями.

Просто отображаем загруженную картинку.

drawImage(image, x, y)

·image — объект Image();

·x,y — координаты верхнего левого угла изображения.

drawImage(image, x, y, width, height)

·image — объект Image();

·x,y — координаты верхнего левого угла изображения;

·width, height — размеры изображения на холсте.

Изображение будет отмасштабированно согласно указанных размеров. При увеличении масштаба относительно реального изображения, картинка может становиться размытой или зернистой.

Дата добавления: 2015-06-27