Chrome 的 Canvas 错误是否存在使用 lineTo 丢失像素的解决方法答案

【问题标题】：Is there a workaround to Chrome's Canvas bug with missing pixels using lineToChrome 的 Canvas 错误是否存在使用 lineTo 丢失像素的解决方法
【发布时间】：2013-01-06 09:08:51
【问题描述】：

Chrome 的 Canvas 实现中有一个已知错误，连续调用 lineTo 有时会在角落丢掉像素：http://jsfiddle.net/rPJBr/2/

var cx = document.getElementById('c').getContext('2d');
cx.beginPath();
cx.moveTo(200.5, 200.5);
cx.lineTo(200.5, 100.5);
cx.lineTo(100.5, 100.5);
cx.stroke();

这是 win7 上 chrome 24 上行为的图片和放大图

错误已在此处记录：http://code.google.com/p/chromium/issues/detail?id=137465

是否有针对此错误的已知解决方法？

【问题讨论】：

摆弄十进制值并使用 0.5 以外的值来触发像素填充？
还是绘制矩形后手动填充角像素？
问题更普遍的是，如果你尝试填充角落像素，很难保留线连接样式

标签： google-chrome canvas html5-canvas

【解决方案1】：

if(windows.chrome) {
    var p = CanvasRenderingContext2D.prototype;
    p.origLineTo = p.lineTo;
    p.lineTo = function(x, y) {
        this.fillRect(x - 0.5, y - 0.5, 1, 1);
        return this.origLineTo(x, y);
    };
    p.origMoveTo = p.moveTo;
    p.moveTo = function(x, y) {
        this.fillRect(x - 0.5, y - 0.5, 1, 1);
        return this.origMoveTo(x, y);
    };
}

【讨论】：