Малюємо коло за допомогою лінії

Публікації

Для малювання кола на полотні canvas у JavaScript є стандартний метод arc().

Розглянемо нестандартне малювання кола за допомогою прямих лінії, за допомогою метода moveTo(), lineTo().

<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});
Адмін 2018-09-11 11:01:34

Тільки зареєстровані користувачі можуть писати коментарі.