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 论坛上问过，但从未得到任何回复。为什么没有人注意到这一点？是bug吗？？

由于我现在无权附加图片，请在此处查看实时示例，您肯定知道我在说什么： Chrome canvas 'bezierCurveTo' bug

4

1 回答 1

0

这是 hack，但您可以在其中一个坐标（x 或 y）上应用很少的偏移量。在这种情况下，第一个点和最后一个点的坐标将不完全相同，并且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 回答