Adobe Flash CC HTML5 发布 Canvas 绘图不准确

Adobe Flash CC HTML5 Publishing Canvas Drawing Inaccuracy

我先从图片说起:

Comparison Of Different Publishing Methods From Flash CC

通过 Flash CC HTML5 使用 CreateJS 发布的内容与在程序上实际创建的内容之间似乎存在巨大差异,尽管它们是精确的副本(我不是在谈论姿势字符)

组成 body 个部分的形状都是三角形,有实心填充,没有描边。

但是,在 HTML5 发布的版本中,所有这些形状现在看起来在彼此之间都有一个细的透明笔触。

非常感谢任何解释或官方支持!

更新: 接受的答案肯定改善了一些问题,但遗憾的是还不够。

由于这是一个平台限制,我决定通过将每一层的所有资源加倍并尽可能地精细重叠来解决这个问题。

如果您需要更新,这里是 link 正在实施的工作: link

这是 Canvas 的一个不幸问题。 SWF 格式实际上绘制的线条两边都有填充,这使得 SWF(和 Flash/Animate IDE)在绘制边缘对齐的形状时可以创建无缝边缘。 Canvas 无法做到这一点,因此抗锯齿会导致您看到的效果。

一种可能的方法是以更大的大小缓存它,然后缩小它。

var bounds = character.nominalBounds; // Added by Flash export
character.cache(bounds.x, bounds.y, bounds.width, bounds.height, 2);

最后一个参数是缓存比例因子(在本例中它使缓存大小加倍)。不过,它仍会按预期比例绘制。

我制作了一个快速示例来显示差异,它确实有帮助。请注意,缓存也是消除边缘锯齿的好方法。 You can download the sample here。使用 Adob​​e Animate 2016。


  1. 从 Adob​​e Animate 导出的普通形状

  1. 缓存形状容器

  1. 缓存大小加倍


您可能还想考虑在它后面放置一个更接近形状颜色的形状,这样如果边缘显示出来,它就不是深灰色背景。