CanvasRenderingContext2D.arc()

CanvasRenderingContext2D.arc() - малює коло.

Синтаксис:

ctx.arc( x, y, radius, startAngle, endAngle, anticlockwis );

Параметри:

ctx - об'єкт CanvasRenderingContext2D.

x - координати осі х.

y - координати ось у.

radius - радіус кола.

startAngle - кут початку кола.

endAngle - кут кінця кола.

anticlockwis - не обов'язково вказувати. Логічне значення: true - проти годиникової стрілки, false - за годиниковою стрілкою.

Опис:

arc() метод об'єкту CanvasRenderingContext2D який малює контури коло на полотні canvas, щоб намалювати контури використовуйте fill(), stroke().

Щоб малювати нове коло або декілька нових кіл потрібно створити новий контур за допомогою beginPath().

Приклад:

<canvas  id="canvas" width="420" height="320"><b style="color:red;">Ваш браузер не підтримує canvas.</b></canvas>

var canvas= document.getElementById("canvas");
crt = canvas.getContext("2d");
crt.beginPath(); //створюємо новий контур
crt.arc(50, 50, 25, 0, 2 * Math.PI);
crt.fillStyle="#f00000";
crt.fill(); //замальовуємо коло

var canvas= document.getElementById("canvas");
crt = canvas.getContext("2d");
crt.beginPath(); //створюємо новий контур
crt.arc(80, 80, 35, 10, 25);
crt.closePath();
crt.lineWidth=5;
crt.strokeStyle="black";
crt.stroke(); //обмальовуємо коло

Малюємо декілька кіл одночасно:

var canvas=document.getElementById('canvas1');
var ctx = canvas.getContext('2d');
//малюємо перше коло
ctx.beginPath(); //створюємо новий контур
ctx.arc(35,35, 30, 0, 6.24); //малюємо контури кола
ctx.closePath();
ctx.fillStyle="red";
ctx.fill()

//малюємо друге коло
ctx.beginPath(); //створюємо новий контур
ctx.arc(95,105, 50, 0, 6.24); //малюємо контури кола
ctx.closePath();
ctx.fillStyle="black";
ctx.fill();

//малюємо третє коло
ctx.beginPath(); //створюємо новий контур
ctx.arc(205,155, 80, 0, 6.24); //малюємо контури кола
ctx.closePath();
ctx.fillStyle="blue";
ctx.fill();

Малюємо коло з прозорим контуром навколо:

var canvas= document.getElementById("canvas2");
ctx = canvas.getContext("2d");
ctx.beginPath(); //створюємо новий контур
ctx.arc(80, 80, 50, 0, 6.28);
ctx.fillStyle=ctx.strokeStyle='red';
ctx.fill();
ctx.globalAlpha=0.12; //вказуємо прозорість
ctx.lineWidth=10;
ctx.stroke(); //малюємо окружність

Якщо малювати без створення кового контура тоді усі контури будуть з'єднані. Приклад малювання декілька кіл без створення нового котура:

var canvas= document.getElementById("canvas3");
ctx = canvas.getContext("2d");
//тут мав бути новий контур - beginPath()
ctx.arc(80, 80, 50, 0, 6.28);


//тут мав бути новий контур - beginPath()
ctx.arc(30, 30, 25, 0, 6.28);

//тут мав бути новий контур - beginPath()
ctx.arc(180, 50, 50, 0, 6.28);

//замальовуємо усі контури
ctx.strokeStyle=ctx.strokeStyle='red';
ctx.lineWidth=5;
ctx.stroke();

Малюємо кола, напів кола, 3/4 кола:

var canvas = document.getElementById("canvas4"), 
ctx = canvas.getContext("2d");

//малюємо 1/4 кола
ctx.beginPath();
ctx.moveTo(20, 90);
ctx.arc(20, 90, 50, 0, Math.PI/2, false);
ctx.closePath();
ctx.strokeStyle = "red";
ctx.stroke();

//малюємо пів коло
ctx.beginPath();
ctx.moveTo(130, 90);
ctx.arc(130, 90, 50, 0, Math.PI, false);
ctx.closePath();
ctx.strokeStyle="blue";
ctx.stroke();

//малюємо 3/4 кола	
ctx.beginPath();
ctx.moveTo(240, 90);
ctx.arc(240, 90, 50, 0, Math.PI * 3 / 2, false);
ctx.strokeStyle="black";
ctx.closePath();
ctx.stroke();

//малюємо ціле коло
ctx.beginPath();
ctx.arc(350, 90, 50, 0, Math.PI*2, false);
ctx.closePath();
ctx.strokeStyle="yellow";
ctx.stroke();