使用 HTML5 Canvas + KineticJS 绘制完美的圆弧

Posted 2023-03-24

【中文标题】使用 HTML5 Canvas + KineticJS 绘制完美的圆弧

【英文标题】：Drawing perfectly circular arcs with HTML5 Canvas + KineticJS

【发布时间】：2013-03-08 05:05:25

【问题描述】：

我目前正在尝试使用 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 来概述这个问题，圆圈正在围绕它们的轴旋转。这种效果在圆弧旋转时显得“摆动”时更加明显。

JSFiddle：http://jsfiddle.net/EHDFV/

【问题讨论】：

很遗憾，我不能说任何关于主题的内容，但是当您 ctx.beginPath() 调用 fillStroke 后，您还应该 ctx.endPath()。

那些弧线对我来说看起来不错。我没有看到任何“摆动”。当您说它们不完美时，完全是什么意思？

@Philipp 我可以看到你来自哪里，但是为了这个例子，endPath() 并不真正需要调用，因为没有“结束路径”，弧本身在其参数的范围内绘制。

@Pointy 在较大的分辨率下更明显，目前我在2550 x 1320 观看它，从屏幕约一米处观察相当明显。

我可能是错的，但您的“抖动”实际上是由抗锯齿引起的。在画布上，您无法关闭抗锯齿功能，因此浏览器将尝试使用部分颜色像素来渲染您的圆圈，这些像素会从纯圆圈路径中“渗出”。我在画布上渲染文本时遇到了这个问题。某些文本（主要是曲线）看起来很模糊，我终于找到了浏览器的抗锯齿功能。我的研究表明不可能在画布上关闭 A-A。您可以在渲染 SVG 文本时关闭 A-A。您可以检查在渲染 SVG 路径时是否可以这样做。

【参考方案1】：

这种晃动会不会是一种视觉错觉。

在您的动画周围添加了一个固定的黑色圆圈。

var blackCircle = new Kinetic.Shape(
    drawFunc: function (canvas) 
        var ctx = canvas.getContext();
        ctx.beginPath();
        ctx.arc(x, y, (r + 10), 0, 2 * Math.PI, true);
        canvas.fillStroke(this);
    ,
    x: x,
    y: y,
    stroke: 'rgb(0,0,0)',
    strokeWidth: 1,
    offset: [x, y]
);

您的摆动是否在任何时候穿过黑色圆圈或留下空隙？

新小提琴http://jsfiddle.net/EHDFV/1/

【讨论】：

你在红色弧线上方的图层上添加了那个黑色圆圈，看起来“摆动”发生在+/-1px内（因为笔划的宽度是1px），但它肯定是那里。如果您将黑色圆圈添加到红色圆弧后面的图层，那么这会变得很明显。