html5 – 为什么我在移动浏览器上看到旋转的条纹？

我正在轮播一个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,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);
  if (first) {
    first = false;
    thumb.hide();
  }
},delay);

笔记：

>该代码在桌面上运行良好(Firefox,Chrome,Safari,Opera甚至IE的最新版本)
>我已经测试过以下设备和浏览器：

> iPhone 3GS：Safari,Opera Mini
> iPhone 4S：Safari
> iPad(第1代)：Safari
> Android galaxy S(带姜饼)：默认浏览器,Firefox手机
>摩托罗拉Droid X(带姜饼)：默认浏览器,Firefox手机

>我没有找到一个桌面浏览器(支持< canvas>),表现出这种行为
>我还没有找到没有展示行为的移动设备
>发布的图像是从iPad放大的截图
>如果重要,< canvas> (同时旋转)正在动画化(通过jQuery),以便在其后面的图像中传输并停止,这在屏幕截图中是可见的.
>有第二个< canvas>在页面上也.它使用相同的大拇指.png,并使用上面发布的相同代码进行旋转,并且还通过不同的背景图像进行动画转换(但是在相反的方向,即一个“竖起大拇指”移动西北,一个东南),并且轨迹也出现在相对于画布上下文的相同位置.

我已经把这堵墙上的所有泥土都扔了,我希望有一些可能导致诊断.有没有人看过这样的东西？我可以尝试不同的方式有没有在HTML5教程网站上错过一些警告标签的警告标签？

==编辑1 ==

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

==编辑2 ==

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

所以我的问题会变成：即使图像填满(非透明像素)整个[Photoshop]画布,为什么我的画布上下文clearRect()行为本身？是否应该抹去画布边界内的任何东西？如果是这样,为什么会留下这几个像素？

==编辑3 ==

经过一番研究,事实证明,Cairo是很多主要的渲染引擎(至少WebKit和Gecko)常用的.就像@JonasWielicki首先提出的那样,开罗图书馆 – 在针对移动执行进行优化时,可能会有点过分吗？

解决方法

每个注释,尝试添加一些透明像素围绕图像的边缘作为解决方法.

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

我注意到,移动浏览器似乎在滚动时会降低或“估计”Alpha通道(慢慢地向上和向下滚动,甚至字体看起来更“酥脆”).我想知道他们是否在两个阶段渲染东西,留下第二阶段的Alpha通道,如果有另一个“框架”在当前的“框架”之后立即呈现,则跳过第二阶段,如果这是有道理的.也许以某种方式混淆了渲染器,认为它没有在它所在的地方画出东西.

无论如何,这可能确实需要一个错误报告.如果没有别的话,我会好奇地听到真正的解释.

原文地址：https://www.jb51.cc/html5/168146.html

html5 – 为什么我在移动浏览器上看到旋转的条纹？

解决方法

相关推荐