在iOS Safari中切片和缩小后,画布图像会变形

时间:2013-06-13 07:07:12

标签: javascript html5-canvas mobile-safari

我尝试加载一些大的精灵图像(1998x800),然后将其切片为单个图像并在Canvas上绘制图像,并尝试通过鼠标或按钮操作切换这些图像。

但我发现当缩小图像并切换到另一张图像时,图像会在iOS Safari中失真。我在iPad1(iOS 5.1.1)和iPhone4(iOS 6.1)上试用了样本,但问题都发生了。

这是Mobile Safari的错误吗?有解决方案吗?

绘制方法:

    cont.drawImage(currentImg, 0, 0, 666, 800, 0, 0, drawWidth, drawHeight);

示例链接: http://jsfiddle.net/v5uuL/

步骤:
1.单击“较小”按钮缩小图像 2.单击“第2部分”按钮在画布上绘制第二个精灵图像 3.在画布上绘制的图像变形。

请注意:
*精灵图像的大小为1998 * 800,每个精灵图像包含三个图像。因此,精灵图像中单个图像的大小为666 * 800。 *如果单击“更大”按钮,然后单击“更小”按钮,则不会出现问题。

截图:
http://i.imgur.com/I1bxMst.png(正常)
http://i.imgur.com/QuztC4v.png(扭曲 - 第二个精灵图像)

0 个答案:

没有答案