为什么我在移动浏览器上看到带有<canvas>旋转的条纹？

Question

我正在进行2d画布的旋转,它在桌面上工作得非常好,但在移动领域有一个小问题.这是一个放大的屏幕截图:

拇指图像在500ms的过程中旋转约0.2rad.我认为所有相关代码都在下面内联.正如您所看到的,图像的每个顶角都留有某种"痕迹".

var duration = 500;
var start = 0;
var stop = 0.287554326;
var step = (stop - start) / 10;
var steps = (stop - start) / step;
var current = 0;
var delay = duration / steps;
var first = true;
if (navigator.userAgent.match(/iP(hone|[ao]d)|android/i)) step *= 1.5;
var rotate_int = setInterval(function() {
  if (current >= stop) {
    clearInterval(rotate_int);
    callback && callback();
    return;
  }
  ctx.clearRect(0, 0, cvs.width, cvs.height);
  ctx.translate(cvs.width / 2, cvs.height / 2);
  ctx.rotate(step);
  current += step;
  ctx.translate(cvs.width / -2, cvs.height / -2);
  ctx.drawImage(i, 0, 0);
  if (first) {
    first = false;
    thumb.hide();
  }
}, delay);

笔记:

1. 代码在桌面上运行得很好(Firefox,Chrome,Safari,Opera甚至IE的最新版本)
2. 我测试过以下设备和浏览器:
   1. iPhone 3GS:Safari,Opera Mini
   2. iPhone 4S:Safari
   3. iPad(第一代):Safari
   4. Android Galaxy S(含姜饼):默认浏览器,Firefox移动版
   5. 摩托罗拉Droid X(带姜饼):默认浏览器,Firefox手机
3. 我还没有找到<canvas>展示行为的桌面浏览器(支持)
4. 我还没有找到一个没有表现出这种行为的移动设备
5. 发布的图像是来自iPad的放大屏幕截图
6. 如果重要的话,<canvas>(旋转时)动画(通过jQuery)在其后面的图像上传输并停止,这在屏幕截图中可见.
7. <canvas>页面上还有第二个.它使用相同的thumbs-up .png,并使用上面发布的相同代码进行旋转,并且还可以在不同的背景图像上进行动画处理(但是在相反的方向上,即一个"竖起"向西北方向移动,一个向东南方向移动并且路径也出现在相对于画布上下文的相同位置.

我把所有的泥浆都扔在了我能想到的这堵墙上,希望有些东西可以导致诊断.以前有没有人见过这样的东西？我可以尝试不同的方式吗？我是否在HTML5教程网站上错过了一些警告这种行为的大红色警告标签？

==编辑1 ==

根据@GGG的评论,我删除了UA嗅探(旨在减少画布重绘的数量和频率,因为如果我使用与桌面相同的设置,移动浏览器都会突然显示)但这只会导致路径变得更加明显(例如更厚).然后,我通过将UA嗅探重新进行实验,但实际上我将它们减少了50%,而不是将它们减少50 %.再次,这导致小径变得更加明显.然而,似乎这种增厚是渐近的 - 换句话说,通过调整动画速度的参数,我可以通过多大程度来限制路径.

==编辑2 ==

根据@ GGG的其他评论,我去编辑图像以添加一些透明数据,以试图找到合适的解决方法.我看到的是图像突出于画布的顶部和左侧边缘(即" Photoshop画布",而不是"HTML5 <canvas>").当我向顶部和左侧添加相等的透明数据填充时,条纹问题就消失了.这是原始的PSD(pre me-adding-extra-spacing):

所以我的问题就变成了:即使图像填充(使用非透明像素)整个[Photoshop]画布,为什么我的画布上下文不能clearRect()表现自己呢？这不应该抹掉画布范围内的任何东西吗？如果是这样,为什么它会留下这几个像素？

==编辑3 ==

经过一些研究,事实证明开罗很常见于几个主要渲染引擎(至少WebKit和Gecko).可能是这样的,正如@JonasWielicki首先提出的那样,Cairo库 - 当针对移动执行进行优化时 - 可能有点过于热心了？

Answer 1

根据评论，尝试在图像边缘添加一些透明像素作为解决方法。

我真的不知道为什么会发生这种情况。我认为这与移动设备上 alpha 通道的奇怪处理有关，但这只是一个猜测。

我注意到移动浏览器在滚动时似乎会下降或“估计”alpha 通道（缓慢地上下滚动，甚至字体看起来更“脆”）。我想知道他们是否分两个阶段渲染事物，将 Alpha 通道留给第二阶段，如果在当前“帧”之后立即渲染另一个“帧”，则跳过第二阶段，如果这有意义的话。也许这会以某种方式让渲染器感到困惑，认为它没有在已经绘制过的地方绘制东西。

不管怎样，这可能确实需要一个错误报告。如果不出意外的话，我很想听到对正在发生的事情的真正解释。