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

前端之家收集整理的这篇文章主要介绍了如何在HTML5 Canvas中避免多边形边缘拼接瑕疵?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我为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)';

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

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

解决方法

这是一个老问题,但我遇到了同样的问题.

我发现在两个多边形之间画一条线(或者它们周围的轮廓)解决了这个问题(至少在firefox和chrome中).

这似乎至少填补了chrome和firefox的空白.在ctx.fill()之后调用ctx.stroke()就足够了,或者如下绘制一行:

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

并且一定要设置strokeStyle.

猜你在找的HTML5相关文章