javascript - 如何提高 Html5 Canvas 路径质量？

Question

我一直在编写一个小 javascript 插件，但在提高渲染的 Canvas 整体质量方面遇到了一些麻烦。我在这里和那里在网上搜索过，但找不到任何有意义的东西。

从我的曲线创建的线条并不平滑，如果您查看下面的 jsfiddle，您就会明白我的意思。它看起来有点像素化。有没有办法提高质量？或者是否有一个 Canvas 框架已经使用某种方法来自动提高我可以在我的项目中使用的质量？

My Canvas Render

不确定这是否有帮助，但我在脚本开头使用了此代码:

var c = document.getElementsByClassName("canvas");

  for (i = 0; i < c.length; i++) {
    var canvas = c[i];
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0,0, canvas.width, canvas.height);
    ctx.lineWidth=1;
  }

}

提前致谢

我的曲线代码示例:

var data = {
diameter: 250,
slant: 20,
height: 290
};

for (i = 0; i < c.length; i++) {
  var canvas = c[i];
  var ctx = canvas.getContext("2d");
  ctx.beginPath();
    ctx.moveTo( 150 + ((data.diameter / 2) + data.slant ), (data.height - 3) );
    ctx.quadraticCurveTo( 150 , (data.height - 15), 150 - ((data.diameter / 2) + data.slant ), (data.height - 3));
    ctx.lineTo( 150 - ((data.diameter / 2) + data.slant ), data.height );
    ctx.quadraticCurveTo( 150 , (data.height + 5), 150 + ((data.diameter / 2) + data.slant ), data.height);
  ctx.closePath();
  ctx.stroke();
}

Answer 1

问题

这是在不手动调整的情况下几乎不可能获得平滑结果的情况之一。

原因与分布平滑像素的最小空间有关。在这种情况下，我们在二次曲线的每个部分之间只有一个像素高度。

如果我们看一条没有平滑的曲线，我们可以更清楚地看到这个限制(没有平滑每个像素位于整数位置):



红线表示单个部分，我们可以看到前一个和下一个部分之间的过渡必须分布在一个像素的高度上。见 my answer here这是如何工作的。

平滑基于将点坐标转换为整数的剩余分数。由于平滑然后使用这个分数来确定颜色和基于笔画主颜色和背景颜色的 alpha 以添加阴影像素，我们将很快遇到限制，因为用于平滑的每个像素本身都占据了整个像素，并且由于缺乏空间在这里，色调将非常粗糙，因此具有启发性。

当一条长线从 y 到 y+/-1(或 x 到 x+/-1)时，端点之间没有一个像素会落在完美边界上，这意味着之间的每个像素都是一个阴影。

如果我们仔细查看当前行中的几段，我们可以更清楚地看到阴影以及它如何影响结果:



此外

虽然这解释了一般原则 - 其他问题是(正如我几天前在这个答案的 revision 1(最后一段)中几乎没有暗示过的那样，但被删除并忘记深入研究它)是在顶部绘制的线一般来说，彼此之间将有助于对比度，因为 alpha 像素将混合并在某些部分引入更高的对比度。

您将不得不检查代码以删除不需要的笔划，以便在每个位置获得一个笔划。例如，您有一些 closePaths()这将连接路径的末端和起点并绘制双线等等。

这两者的结合应该在平滑和锐利之间取得很好的平衡。

平滑试验台

此演示允许您查看基于可用空间的平滑分布效果。

曲线越弯曲，每个部分变得越短，需要的平滑越少。结果:更平滑的线条。

var ctx = c.getContext("2d");
ctx.imageSmoothingEnabled = 
  ctx.mozImageSmoothingEnabled = ctx.webkitImageSmoothingEnabled = false; // for zoom!

function render() {
  ctx.clearRect(0, 0, c.width, c.height);
  !!t.checked ? ctx.setTransform(1,0,0,1,0.5,0.5):ctx.setTransform(1,0,0,1,0,0);
  ctx.beginPath();
  ctx.moveTo(0,1);
  ctx.quadraticCurveTo(150, +v.value, 300, 1);
  ctx.lineWidth = +lw.value;
  ctx.strokeStyle = "hsl(0,0%," + l.value + "%)";
  ctx.stroke();
  vv.innerHTML = v.value;
  lv.innerHTML = l.value;
  lwv.innerHTML = lw.value;
  ctx.drawImage(c, 0, 0, 300, 300, 304, 0, 1200, 1200);  // zoom
}

render();
v.oninput=v.onchange=l.oninput=l.onchange=t.onchange=lw.oninput=render;

html, body {margin:0;font:12px sans-serif}; #c {margin-top:5px}

<label>Bend: <input id=v type=range min=1 max=290 value=1></label>
<span id=vv></span><br>
<label>Lightness: <input id=l type=range min=0 max=60 value=0></label>
<span id=lv></span><br>
<label>Translate 1/2 pixel: <input id=t type=checkbox></label><br>
<label>Line width: <input id=lw type=range min=0.25 max=2 step=0.25 value=1></label>
<span id=lwv></span><br>
<canvas id=c width=580></canvas>

解决方案

除非可以提高分辨率，否则没有好的解决方案。因此，我们坚持调整颜色和几何形状以提供更平滑的结果。

我们可以使用一些技巧来绕过:

我们可以将线宽减少到 0.5 - 0.75，这样我们就可以得到一个用于着色的不太明显的颜色渐变。

我们可以调暗颜色以降低对比度

我们可以翻译半像素。这在某些情况下会起作用，而在其他情况下则不会。

如果锐度不是必需的，那么增加线宽可能有助于平衡阴影。示例值可以是 1.5 与较浅的颜色/灰色相结合。

我们也可以使用阴影，但这是一种性能饥渴的方法，因为它使用 more memory as well as Gaussian blur, together with two extra composition steps并且相对较慢。我建议使用 4) 代替。

1) 和 2) 有点相关，因为使用线宽 < 1 将强制在整条线上进行亚像素化，这意味着没有像素是纯黑色的。这两种技术的目标是减少对比度以伪装阴影渐变，从而产生更清晰/更细线的错觉。

请注意，3) 只会改善最终落在精确像素边界上的像素。所有其他情况仍然是模糊的。在这种情况下，这个技巧对曲线几乎没有影响，但对矩形以及垂直和水平线很有用。

如果我们使用上面的测试平台应用这些技巧，我们将获得一些可用的值:

Variation 1

ctx.lineWidth = 1.25;              // gives some space for lightness
ctx.strokeStyle = "hsl(0,0%,50%)"; // reduces contrast
ctx.setTransform(1,0,0,1,0.5,0.5); // not so useful for the curve itself

Variation 2 :

ctx.lineWidth = 0.5;               // sub-pixels all points
ctx.setTransform(1,0,0,1,0.5,0.5); // not so useful for the curve itself

我们可以通过试验线宽和笔触颜色/亮度来进一步微调。

另一种方法是使用 Photoshop 或具有更好平滑算法的类似工具为曲线生成更准确的结果，并将其用作图像而不是使用原生曲线。