如何在HTML5 Canvas中避免多边形边缘拼接工件？ [英] How can I avoid polygon edge stitching artifacts in HTML5 Canvas?

问题描述

我为OpenHeatMap开源项目保留了并行Flash和HTML5 / Canvas渲染器。我困扰在填充多边形的渲染与两个版本之间的分数坐标的不一致。如果您渲染共享边缘的两个多边形，Canvas将沿着该边显示可见的连接，而Flash将无缝地将两个多边形融合在一起，如果它们是相同的颜色，则没有差别。我在这里建立了一个最小页面来显示问题：

I maintain parallel Flash and HTML5/Canvas renderers for the OpenHeatMap open-source project. I'm plagued by an inconsistency in the rendering of filled polygons with fractional coordinates between the two versions. If you render two polygons that share an edge, Canvas will show a visible join along that edge, whereas Flash will seamlessly meld the two together, with no difference visible if they're the same color. I've put together a minimal page here to show the issue:

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

[Gak，防止垃圾邮件阻止这是一个图片，但看到这里

[Gak, spam prevention stops this from being an image, but see here for a screenshot web.mailana.com/labs/stitchingbug.png ]

源代码以及执行相同操作的Flash项目在这里：

The source, along with a Flash project doing the same thing, is here:

github.com/petewarden/stitchingbug

github.com/petewarden/stitchingbug

基本问题是，如果你不能缝合，就不可能做任何复杂的多边形渲染多边形一起没有接缝。我不知道什么是Flash的填充规则，但他们产生正确的结果，如3D渲染器。有没有人有客户端修复来解决这个问题？它是跨浏览器，这使它看起来故意，所以任何参考使用的规则也将赞赏。这里是Canvas代码：

The fundamental issue is that it's impossible to do any complex polygonal rendering if you can't stitch polygons together without seams. I don't know exactly what Flash's fill rules are, but they produce the correct results, as do 3D renderers. Does anyone have a client-side fix to work around this problem? It's cross-browser, which makes it seem deliberate, so any references to the rules used would also be appreciated. Here's the Canvas code:

    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();

推荐答案

这是一个老问题，问题。

This is an old question, but I had the same problem.

我发现在两个多边形之间绘制一行（或围绕它们的轮廓）解决了这个问题（至少在firefox和chrome中）。

I find that drawing a single line between the two polygons (or an outline around them) solves the problem (in firefox and chrome at least).

这似乎至少弥补了chrome和firefox之间的差距。在 ctx.fill（）后调用 ctx.stroke（）就足够了，或者如下绘制一行：

That seems to fill the gap in chrome and firefox at least. It is sufficient to call ctx.stroke() after ctx.fill(), or draw a single line as follows:

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

并且一定要设置strokeStyle。

and be sure to set the strokeStyle of course.

这篇关于如何在HTML5 Canvas中避免多边形边缘拼接工件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！