Метод bezierCurveTo

Рисует кривую Безье от текущей точки на холсте до указанной через промежуточные (контрольные) точки.

Подробнее о кривых Безье.

Синтаксис

bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);

Параметры

·controlX, controlY, controlX2, controlY2... — координаты контрольных точек, может быть сколько угодно;

·endX, endY — координаты окончания кривой.

Кривая отобразится после вызова метода stroke(). Цвет дуги определяет свойство strokeStyle, толщину линии — lineWidth. Текущее положение на холсте переместится в конец кривой.

Пример

Javascript

ctx.moveTo(75,40);

ctx.bezierCurveTo(75,37,70,25,50,25);

ctx.bezierCurveTo(20,25,20,62.5,20,62.5);

ctx.bezierCurveTo(20,80,40,102,75,120);

ctx.bezierCurveTo(110,102,130,80,130,62.5);

ctx.bezierCurveTo(130,62.5,130,25,100,25);

ctx.bezierCurveTo(85,25,75,37,75,40);

ctx.stroke();

 

 

Метод clearRect

Очищает указанную область.

Синтаксис

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);

 

 

Метод closePath

Замыкаем контур: последняя точка контура соединяется с первой. Текущее положение на холсте перемещается туда же. Начало контура определяется 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

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

Синтаксис

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

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

Синтаксис

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);