我一直在编写一个小 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();
}

最佳答案

问题

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

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

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



红线表示单个部分，我们可以看到前一个和下一个部分之间的过渡必须分布在一个像素的高度上。见 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>

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

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

关于javascript - 如何提高 Html5 Canvas 路径质量？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38010615/