Метод clearRect

Пример

Параметры

Синтаксис

Метод bezierCurveTo

Пример

Синтаксис

Метод beginPath

Пример

Параметры

Синтаксис

Метод arc

Пример

Javascript

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

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

var lineargradient = ctx.createLinearGradient(150,0,150,150);

lineargradient.addColorStop(0,"red");

lineargradient.addColorStop(1,"white");

ctx.fillStyle = lineargradient;

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

var lineargradient2 = ctx.createLinearGradient(50,50,150,250);

lineargradient2.addColorStop(0,"green");

lineargradient2.addColorStop(0.5,"blue");

lineargradient2.addColorStop(1,"yellow");

ctx.strokeStyle = lineargradient2;

ctx.moveTo(50,50);

ctx.lineTo(150,250);

ctx.stroke();

Рисует дугу.

arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise)

·centerX, centerY — координаты центра дуги;

·radius — величина радиуса;

·startingAngle, endingAngle — начало и окончание дуги. Значения задаются в радианах;

·antiClockwise — направление соединения точек начал и конца дуги: по часовой стрелки или против. По умолчанию значение равно false — рисуем по часовой стрелке. Значение true — против часовой.

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

Javascript

var centerX = 288,

centerY = 160,

radius = 75,

startingAngle = 1.1 * Math.PI,

endingAngle = 1.9 * Math.PI,

counterclockwise = false;

context.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);

context.lineWidth = 15;

context.strokeStyle = "black";

context.stroke();

Объявляем, что начинаем новый контур. Необходим когда хотим задать разные стили объектам на холсте.

beginPath()

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

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

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

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

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

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