Следующий код создает круг в HTML 5 Canvas с помощью jQuery:
Код:
//get a reference to the canvas
var ctx = $('#canvas')[0].getContext("2d");
DrawCircle(75, 75, 20);
//draw a circle
function DrawCircle(x, y, radius)
{
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI*2, true);
ctx.fillStyle = 'transparent';
ctx.lineWidth = 2;
ctx.strokeStyle = '#003300';
ctx.stroke();
ctx.closePath();
ctx.fill();
}
Я пытаюсь имитировать любой из следующих типов кругов:
Я исследовал и нашел эту статью, но не смог ее применить.
Я бы хотел, чтобы круг был нарисован, а не просто появился.
Есть лучший способ сделать это? Я чувствую, что там будет много математики :)
PS Мне нравится простота PaperJs, может быть, это был бы самый простой подход, используя упрощенные пути?