javascript - 不同 Canvas 渲染

Question

我为网络管理员做了一个小服务http://qcoder.ru/pixelfiller/ ，但我有一个问题。模式#7 和#8(对 Angular 线)在 Mozilla、Safari 和 Opera 中呈现效果不佳(模式之间有小的空白)。我怎样才能像在 Chrome 中一样进行跨浏览器渲染？

这些模式的函数:

// #7
function template7() {
    c.beginPath();
    c.moveTo(size, 0);
    c.lineTo(0, size);
    c.stroke();
}

// #8
function template8() {
    c.beginPath();
    c.moveTo(0, 0);
    c.lineTo(size, size);
    c.stroke();
}

Answer 1

看起来可能是抗锯齿问题；从您分享的代码片段来看，您似乎正在从一个 Angular 到对 Angular 画一条线。如果您改为在 Canvas 外绘制开始和结束一两个像素的线，您可能会看到更好的结果:

我的意思的错误图表:

This:         Not This:

\
 \++++        \++++
 +\+++        +\+++
 ++\++        ++\++
 +++\+        +++\+
 ++++\        ++++\
      \