Для малювання кола на полотні canvas у JavaScript є стандартний метод arc().
Розглянемо нестандартне малювання кола за допомогою прямих лінії, за допомогою метода moveTo(), lineTo().
Для малювання кола за допомогою ліній використовуються для розрахунку синусі і косинуси (Math.sin(), Math.cos()).
<canvas id="canvas" width="420" height="340"></canvas>
function drawCircle(context, centerX, centerY, radius)
{
context.beginPath();
context.moveTo(radius + centerX, centerY);
for(var i = 0; i < 361; i ++)
{
context.lineTo(Math.cos(i / 180 * Math.PI) * radius + centerX, Math.sin(i / 180 * Math.PI) * radius + centerY);
}
context.closePath();
context.stroke();
}
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');
drawCircle(ctx, 180, 170, 160);
Удосконалимо функцію drawCircle щоб приймала більше параметрів:
function drawCircle(context, options)
{
if(options==undefined)options={x:50,y:50, radius:10, lineColor:'black', lineWidth:1};
if(options.x==undefined)options.x=50;
if(options.y==undefined)options.y=50;
if(options.radius==undefined)options.radius=10;
if(options.color)context.strokeStyle=context.shadowColor=options.color;
if(options.lineWidth)context.lineWidth=options.lineWidth;
if(options.shadowBlur)context.shadowBlur=options.shadowBlur;
context.beginPath();
context.moveTo(options.radius + options.x, options.y);
for(var i = 0; i < 361; i ++)
{
context.lineTo(Math.cos(i / 180 * Math.PI) * options.radius + options.x, Math.sin(i / 180 * Math.PI) * options.radius + options.y);
}
context.closePath();
context.stroke();
}
var canvas=document.getElementById('canvas2');
var ctx=canvas.getContext('2d');
drawCircle(ctx, {x:180, y:170, radius:160, color:'blue', lineWidth:2, shadowBlur:3});
Функція для малювання кола Circle приймає параметри: centerX - центр кола по осі X, centerY - центр кола по осі Y, radius - радіус кола, points - кількість точок для малювання окружності.
Якщо кількість точок points вказати мале число (5 або 10) тоді буде намальовано многокутник.
var canvas=document.getElementById('canva3');
var contex=canvas.getContext('2d');
canvas.width=200;
canvas.height=200;
function Circle(centerX,centerY,radius,points){
contex.beginPath();
for(var i=0, t, x, y; i<points; i++){
t=i*2*Math.PI/points;
x=centerX+radius*Math.cos(t);
y=centerY+radius*Math.sin(t);
if(i===0)
contex.moveTo(x,y);
else
contex.lineTo(x,y);
}
contex.closePath();
contex.stroke();
}
Circle(100,100,75,100);