Arc(x, y, radius, startAngle, endAngle, counterClockwise); ?

Посмотрите на схему, дуга - это часть окружности воображаемого круга, этот воображаемый круг можно определить координатами x,y и радиусом.

Далее мы можем определить саму дугу, для этого нужно выбрать 2 точки по диаметру этой мнимой окружности, и углы от центральной точки до вашей точки будут начальмым и конечным углами. Углы задаются в радианах.

И последним аргументом мы передаем направление рисования, по умолчанию это false, что означает что рисоваться будет по часовой стрелке (необязательный параметр).

С помощью метода arc() можно нарисовать полную окружность

<html>

<body>

<canvas id='draw' style='border:1px solid' width='200' height='200'></canvas>

<script type='text/javascript'>

var x1=(Math.PI/180)*0;

var x2=(Math.PI/180)*360;

var canvas=document.getElementById("draw")

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

x.beginPath();

x.arc(30,30,20,x1,x2);

x.moveTo(100,100);

x.rect(70,50,70,70);

x.fill();

</script>

</body>

</html>

Для раскрашивания нарисованных в canvas фигур предусмотрены свойства: fillStyle и strokeStyle. Свойство fillStyle используется для применения цвета к закрашенным, а strokeStyleдля применения цвета к не закрашенным фигурам.

<html>

<body>

<canvas id='draw' width='300' height='200' style='border:1px solid'></canvas>

<script type='text/javascript'>

var canvas=document.getElementById("draw")

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

x.fillStyle="green";

x.fillRect(10,40,65,65);

x.strokeStyle="#FF45FF";

x.strokeRect(100,40,65,65);

x.fillStyle="rgb(255,73,73)";

x.fillRect(190,40,65,65);

</script>

</body>

</html>

Как видно из предыдущего примера цвета могут задаются так же как для шрифта.

В canvas цвет может задавать с помощью rgba (задается цвет и прозрачность элемента).

<html>

<body>

<canvas id='draw' width='270' height='150' style='border:1px solid;'></canvas>

<script type='text/javascript'>

var canvas=document.getElementById("draw")

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

x.fillStyle="rgba(0,0,0,0.5)";

x.fillRect(10,40,65,65);

x.fillStyle="rgba(0,0,0,0.1)";

x.fillRect(100,40,65,65);

x.fillStyle="rgba(0,0,0,1)";

x.fillRect(190,40,65,65);

</script>

</body>

</html>

Здесь используются две знакомые нам функции: fillStyle - задает цвет и прозрачность кисти рисования и fillRect - рисует прямоугольник с заданными координатами и размерами.

Линии

Перемещение пера в точку с координатами x,y без прорисовки линии выполняется методом moveTo(x, y).

Перемещение пера в точку с координатами x,y с прорисовкой линии выполняется методом lineTo(x, y).

В HTML имеются несколько свойств для оформления линий нарисованных с помощью метода lineTo(), это lineWidth, lineCap, lineJoin.

С помощью свойства lineWidth можно установить ширину линии (по умолчанию линии имеют ширину 1 пиксель)

<html>

<body>

<canvas id='draw' width='260' height='120' style='border:1px solid; padding:10px;'></canvas>

<script type='text/javascript'>

var canvas=document.getElementById("draw")

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

//Рисуем линию толщиной 3 пикселя

x.beginPath();

x.moveTo(10,10);

x.lineWidth=3;

x.lineTo(200,10);

x.stroke();

//Рисуем линию толщиной 10 пикселей

x.beginPath();

x.moveTo(10,40);

x.lineWidth=10;

x.lineTo(200,40);

x.stroke();

//Рисуем линию толщиной 1 пиксель

x.beginPath();

x.moveTo(10,70);

x.lineWidth=1;

x.lineTo(200,70);

x.stroke();

//Рисуем линию толщиной 6 пикселей

x.beginPath();

x.moveTo(10,100);

x.lineWidth=6;

x.lineTo(200,100);

x.stroke();

</script>

</body>

</html>