2

私は弧から円を作ろうとしています（ドーナツチャートに似たものが視覚的に達成しようとしているものです）、そして私は成功しました。しかし、エッジは4歳の人が描いたように見えます！

これが私の弧を描く方法です：

var arc = new Kinetic.Shape({
    drawFunc: function(canvas) {
        var context = canvas.getContext('2d');

        var x = Math.round(canvas.width / 2);
        var y = Math.round(canvas.height / 2);
        var radius = 210;
        var startAngle = 1.44 * Math.PI;
        var endAngle = 1.83 * Math.PI;
        var counterClockwise = false;

        context.beginPath();
        context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
        context.lineWidth = 175;
        canvas.fillStroke(this);
    },
    stroke: '#121b21',
    strokeWidth: 175
});

例のフィドルを作成しました。

私はキャンバスに慣れていないので、おそらく私だと思いました...誰かが私がここで何か間違ったことをしている場合は私に知らせてもらえますか？

ありがとうございました！

4

1 に答える 1

2

これは、WebKitブラウザーに存在する太いストロークアークのバグです。円弧描画コードの丸めの問題が原因である可能性があります。他のブラウザでも問題ないように見える可能性があります。Webkitの場合、別の方法を使用して、これらのウェッジを描画できます。

考えられる回避策：

  • 現在の方法を使用しますが、ウェッジを使い終わったら真ん中に白い円を入れて、内部の凹凸を消し去ります。
  • context.arcの代わりにKinetic.Wedgeを使用します。
于 2013-02-11T20:58:13.950 に答える