1

最後の制御点が最初の点と重なるベジェ曲線をストロークすると、曲線の形状はキャンバスに表示されません。サンプルコードは次のとおりです

    var cv = document.getElementById('cv'), cxt = cv.getContext('2d'),

//  4 points :  last point overlaps first point;
pts = [[100, 100], [400, 50], [350, 300], [100, 100]];

//  draw bezier curve
cxt.beginPath();
cxt.moveTo(pts[0][0], pts[0][1]);
cxt.bezierCurveTo(pts[1][0], pts[1][2], pts[2][0], pts[2][3], pts[3][0], pts[3][4]);

cxt.stroke();

以前に chrome-help フォーラムで質問したことがありますが、応答がありません。なぜ誰もこれに気付かないのですか？バグですか??

現在、画像を添付する許可を得ていないため、ライブ サンプルについてはこちらを確認してください 。

4

1 に答える 1

0

これはハックですが、座標 (x または y) の 1 つに少しオフセットを適用できます。その場合、最初と最後の点の座標は正確に同じではなくChrome、曲線を描きます。次のようなことを試してください：

pts = [[100, 100], [400, 50], [350, 300], [100, 100]];

//....

cxt.moveTo(pts[0][0], pts[0][1]);
cxt.bezierCurveTo(pts[1][0], pts[1][1], 
                  pts[2][0], pts[2][1], 
                  pts[3][0], pts[3][1]+1e-5);

デモ

于 2012-05-17T10:20:40.527 に答える