javascript - 不同的画布渲染

Question

我为网站管理员 http://qcoder.ru/pixelfiller/做了一项小服务，但我有一个问题。模式 #7 和 #8（对角线）在 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

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

我的意思的错误图表：

This:         Not This:

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