html5制作圆弧,javascript – 使用HTML5 Canvas KineticJS绘制完美的圆弧

我目前正在尝试使用KineticJS画布框架绘制弧线.我遇到的问题是这些弧线并不像所需的那样“完美”圆形.

他们被抽出如下：

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]

});

我知道这可能是一个问题,因为没有在基于像素的介质上渲染近乎完美的圆而没有在笔划上使用抗锯齿

如果这个问题可以通过使用矢量图形渲染或者是否有替代解决方案来解决,那么我在徘徊？

我已经包含了一个JSFiddle来概述这个问题,这些圆圈围绕它们的轴旋转动画.当圆弧在旋转时看起来“摆动”时,这种效果更明显.