Arc(x, y, radius, startAngle, endAngle, anticlockwise)

↑

▷ Содержание

⇐ ПредыдущаяСтр 14 из 14

x и y – координаты, в которых начинается арка;

radius – радиус окружности, по которой создается арка;

startAngle, endAngle – начальный и конечный угол, которые усекают окружность до арки. В качестве единицы измерения углов применяются радианы. Например, полная окружность – это 2п радиан. Если нам надо нарисовать полный круг, то параметр endAngle имеет значение 2п. В JavaScript эту величину можно получить с помощью выражения Math. PI *2.

anticlockwise – направление движения по окружности при отсечении ее части, ограниченной начальным и конечным углом. При значении true – направление против часовой стрелки, а при значении false – по часовой стрелке.

Метод arkTo () также рисует дугу. Определение:

ArkTo(x1, y1, x2, y2, radius),

где х1 и y1 – координаты первой контрольной точки, х2 и y2 – координаты второй контрольной точки, radius – радиус дуги.

Метод quadraticCurveTo () создает квадратичную кривую. Имеет следующее определение:

QuadraticCurveTo(x1, y1, x2, y2),

где х1 и y1 – координаты первой опорной точки, х2 и y2 – координаты второй опорной точки.

Метод bezierCurveTo () – рисует кривую Безье. Определение:
bezierCurveTo (x 1, y 1, x 2, y 2, x 3, y 3),

где х1 и y1 – координаты первой опорной точки, х2 и y2 – координаты второй опорной точки, х3 и y3 - координаты третьей опорной точки.

Изображения на canvas

Метод drawImage () – позволяет отдельно выводить изображения на canvas. Определение:

Context.drawImage(image, x, y),

где image передает выводимое изображение, x и y – координаты верхнего левого угла изображения.

<script>

var canvas = document.getElementById("myCanvas"),

context = canvas.getContext("2d");

var img = new Image();

img.src = "dubi.png";

img.onload = function() {

context.drawImage(img, 0, 0);

};

</script>

Другая версия метода позволяет дополнительно задать ширину и высоту выводимого изображения: context.drawImage(img, 20, 40, 110, 90);

Добавление теней

Элемент canvas поддерживает добавление теней к нарисованным объектам. Для создания теней применяются следующие свойства:

shadowOffsetX – горизонтальное смещение в пикселях справа (или слева при отрицательном значении);

shadowOffsetY – вертикальное смещение;

shadowBlur – число пикселей для установки размытия тени;

shadowColor – цвет тени.

Трансформации

Элемент canvas поддерживает трансформацию.

Перемещение осуществляется методом translate ():

Translate (x, y),

где параметр указывает на смещение по осям.

Для поворота фигур применяется метод rotate ():

Rotate (angle),

где в качестве параметра передается угол поворота в радианах относительно точки с координатами (0,0)

Для масштабирования фигур применяется метод scale ():

Scale(xScale, yScale),

параметр xScale указывает на масштабирование по оси х, а параметр yScale – по оси y.

Рисование мышью

В canvas можно создавать фигуры динамически, рисуя указателем мыши. Для обработки движения мыши определяются три обработчика – нажатие мыши, перемещение и отпускание мыши. При нажатии мыши устанавливаем переменную draw равным true, т.е. идет рисование. Также при нажатии мы фиксируем точку, с которой будет идти рисование.

При перемещении мыши получаем точку, на которую переместился указатель, и рисуем линию. При отпускании указателя закрываем графический путь методом context.closePath() и сбрасываем переменную draw в false.

<script>

var canvas = document.getElementById("myCanvas"),

context = canvas.getContext("2d"),

w = canvas.width,

h=canvas.height;

var mouse = { x:0, y:0};

var draw = false;

canvas.addEventListener("mousedown", function(e){

mouse.x = e.pageX - this.offsetLeft;

mouse.y = e.pageY - this.offsetTop;

draw = true;

context.beginPath();

context.moveTo(mouse.x, mouse.y);

});

canvas.addEventListener("mousemove", function(e){

if(draw==true){

mouse.x = e.pageX - this.offsetLeft;

mouse.y = e.pageY - this.offsetTop;

context.lineTo(mouse.x, mouse.y);

context.stroke();

}

});

canvas.addEventListener("mouseup", function(e){

mouse.x = e.pageX - this.offsetLeft;

mouse.y = e.pageY - this.offsetTop;

context.lineTo(mouse.x, mouse.y);

context.stroke();

context.closePath();

draw = false;

});

</script>

Познавательные статьи:



Психологические особенности спортивного соревнования

Приготовление дезинфицирующих растворов различной концентрации

Занятость населения и рынок труда

Социальный статус семьи и её типология