如何在HTML5 Canvas中避免多边形边缘拼接瑕疵？

Question

我为OpenHeatMap开源项目维护并行Flash和HTML5/Canvas渲染器.我被两个版本之间的小数坐标的填充多边形的渲染不一致所困扰.如果渲染两个共享边缘的多边形,Canvas将沿着该边缘显示可见的连接,而Flash将无缝地将两者融合在一起,如果它们是相同的颜色则没有可见的差异.我在这里放了一个小页面来显示问题:

http://web.mailana.com/labs/stitchingbug/

[Gak,垃圾邮件预防阻止了这种形象,但请看这里的截图web.mailana.com/labs/stitchingbug.png]

源代码以及执行相同操作的Flash项目位于:

github.com/petewarden/stitchingbug

根本问题在于,如果不能在没有接缝的情况下将多边形拼接在一起,则无法进行任何复杂的多边形渲染.我不确切知道Flash的填充规则是什么,但是它们产生了正确的结果,就像3D渲染器一样.有没有人有客户端修复来解决这个问题？它是跨浏览器,这使它看起来很刻意,因此任何对所用规则的引用也将受到赞赏.这是Canvas代码:

    var ctx = canvas.getContext('2d');
    ctx.fillStyle = 'rgb(0,0,0)';

    ctx.beginPath()
    ctx.moveTo(0, 0);
    ctx.lineTo(50.5, 0);
    ctx.lineTo(50.5, 100);
    ctx.lineTo(0, 100);
    ctx.closePath();
    ctx.fill();

    ctx.beginPath()
    ctx.moveTo(50.5, 0);
    ctx.lineTo(100, 0);
    ctx.lineTo(100, 100);
    ctx.lineTo(50.5, 100);
    ctx.closePath();
    ctx.fill();

Answer 1

您是否考虑过截断所有绘图坐标？它不应该降低质量，并且可能会解决您的问题。

您还可以在麻烦的区域上画一条线，使问题不可见。

如果其他一切都失败了，那应该可行。