SVG和Canvas的纠结----1像素问题

已注销
550 阅读3分钟

译者：betsey

原文链接

SVG和Canvas的纠结----1像素问题

作者博客, 25 January 2010,

SVG 和 canvas作为两种极为出色的技术，正在改变着我们在web上使用图形的方式。我喜欢使用这两种技术，而且现在对他们的支持也在逐步地改善。(IE9 也可能会 支持 SVG!) 然而，有一个问题一直在困扰着我，而这个问题却不是由于他们的失误造成的！

矢量

众所周知， SVG 和 Canvas 都是基于矢量的. 这就意味着像素这个问题并不是他们所关心的，而是交由他们的图形渲染去实现。由此问题便出现了。下面的一段是用canvas绘制一个1px的直线的代码：

var canvas1, context1;
    canvas1 = document.getElementById(""canvas1"");
    canvas1.height = 20;
    canvas1.width = 560;
    context1 = canvas1.getContext(""2d"");
    context1.strokeStyle = '#000000';

    // draw
    context1.moveTo(1,10);
    context1.lineTo(200,10);
    context1.stroke();

如你所见 如你所见，上面这个线条是模糊的，而我不想要它变得模糊。很幸运的是，我们只通过一点点简单的修正就可以让它清楚起来：

context1.moveTo(1,10**.5**);
context1.lineTo(200,10**.5**);
context1.stroke();

<img src=""p8.qhimg.com/d/inn/7e7de…

仅仅使用了 半像素的偏移, 这条直线便变得干净利落. 这样做很有效，因为在 SVG 和 Canvas中, 像素并非一个不可分割的单元，所以你可以画出一个像素的一部分.

当你开始用代码画一个以一个确定的像素为起点的直线时，你实际上是从这个像素的左上角开始画一条直线。当这个像素是1像素宽的时候，这条直线的上半部分被画为一个像素，而下半部分被画为另外一个像素上，结果你的直线便变得模糊了（译者注：也就是说，如果你想用代码画一条1px的直线，但是实际上却渲染成了一条2px的直线，呵呵！）

正如我所说的一样，我们不能把错误怪在SVG和Canvas的头上！SVG和Canvas本来就不应该关注像素级的事情，因为他们是基于矢量而工作的。直线的模糊是由于设计的问题导致的。然而，如果我们真的用上面的方法修正了这个问题，canvas和SVG开发者就会因为代码里面到处充斥了‘+0.5’而处女座症状发作，而目前的实际情况就是这样。

我所期待的

我真的不希望让我的canvas或者SVG代码充满了 +0.5. 我希望canvas 或者 SVG 工具可以智能的识别出来直线被错误的模糊化，然后确保这种情况的不会出现。然而现在，我却不知道任何现存的工具可以实现这一点。

最后的最后，我希望（这些工具）可以提供给开发者一个全局的选项，进行模式之间的切换（一个是“理论正确模式”，另外一个是“锐化模式”）。我们可以称之为 栅格对齐 (一个布尔值，作为canvas的一个属性，默认为false) 并且如果设为true的话, 他就可以默默的为我加上+0.5的修正，好开心.

avatar
文章
阅读
粉丝