Geek asks and answers

Drawing perfectly circular arcs using HTML5 Canvas + KineticJS

I am currently trying to draw arcs using the KineticJS canvas structure. The problem I am facing is that these arcs are not as good as required.

They are stretched as follows:

var redArc = new Kinetic.Shape({
    drawFunc: function (canvas) {
        var ctx = canvas.getContext();
        ctx.beginPath();
        ctx.arc(x, y, r, 0, Math.PI / 2, true);    // Arc of 270°
        canvas.fillStroke(this);
    },
    x: x,
    y: y,
    stroke: 'rgb(255,0,0)',
    strokeWidth: 20,
    offset: [x, y]
});

I knew this could be a problem since there is no such thing as rendering an almost perfect circle on a pixel environment without using anti-aliasing on the bar

I wandered if this problem could be solved by rendering with vector graphics or if there was an alternative solution?

I included JSFiddle to describe this problem, animation circles rotate around their axis. This effect is more noticeable when the arc appears when they rotate. "

JSFiddle: http://jsfiddle.net/EHDFV/

+5
1

.

.

var blackCircle = new Kinetic.Shape({
    drawFunc: function (canvas) {
        var ctx = canvas.getContext();
        ctx.beginPath();
        ctx.arc(x, y, (r + 10), 0, 2 * Math.PI, true);
        canvas.fillStroke(this);
    },
    x: x,
    y: y,
    stroke: 'rgb(0,0,0)',
    strokeWidth: 1,
    offset: [x, y]
});

?

http://jsfiddle.net/EHDFV/1/

0

More articles:


All Articles