Question

如果抚摸最后一个控制点与第一个点重叠的贝塞尔曲线，曲线形状将不会显示在画布上;示例代码为

    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论坛上提出过要求，但从未得到任何回复。为什么没人注意到这个？这是一个错误??

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

Answer 1

这是黑客攻击，但您可以在其中一个坐标（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);

DEMO

Canvas上下文“bezierCurveTo”在Chrome 16+ / Safari 5+下有一个错误

1 个答案: