我正在轮播一个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首先提出的那样,开罗图书馆 – 在针对移动执行进行优化时,可能会有点过分吗？