Я выполняю поворот 2d-полотна, который хорошо работает на рабочем столе, но есть небольшая проблема в мобильном пространстве. Здесь увеличен снимок экрана:
Изображение большого пальца поворачивается примерно на 0.2rad в течение 500 мс. Я думаю, что все соответствующие коды приведены ниже. Как вы можете видеть, есть какой-то "след", оставленный каждым из верхних углов изображения.
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);
Примечания:
- Код работает очень хорошо на рабочем столе (самые последние воплощения Firefox, Chrome, Safari, Opera и даже IE)
- Я тестировал следующие устройства и браузеры:
- iPhone 3GS: Safari, Opera Mini
- iPhone 4S: Safari
- iPad (1-й ген): Safari
- Android Galaxy S (с пряниками): браузер по умолчанию, Firefox mobile
- Motorola Droid X (с пряниками): браузер по умолчанию, Firefox mobile
- Я не нашел браузер для рабочего стола (поддерживающий
<canvas>
), который демонстрирует поведение - Я не нашел мобильное устройство, которое не показывает поведение
- Опубликованное изображение - увеличенный снимок экрана с iPad.
- Если это важно,
<canvas>
(при вращении) анимируется (через jQuery), чтобы проходить через изображение позади него и останавливаться, что видно на снимке экрана. - На странице есть второй
<canvas>
. Он использует те же самые большие пальцы вверх .png и вращается с использованием того же кода, что и выше, а также анимируется для перехода через другое фоновое изображение (но в противоположном направлении, то есть один "большой палец вверх" перемещается на северо-запад и один на юго-восток), и следы появляются там также в том же месте относительно контекста canvas.
Я выбросил всю грязь на эту стену, о которой я могу думать, в надежде, что что-то может привести к диагнозу. Кто-нибудь еще видел что-то подобное раньше? Что я могу попробовать по-другому? Я пропустил какую-то большую красную предупреждающую метку на сайте учебника HTML5, где предупреждает о таком поведении?
== РЕДАКТИРОВАТЬ 1 ==
В комментарии @GGG я удалил UA sniff (который предназначен для уменьшения числа и частоты перерисовывания холста, потому что мобильные браузеры все разыгрывают, если я использую те же настройки, что и для рабочего стола), но это только заставило тропы стать более выраженный (например, толще). Затем я экспериментировал, возвращая UA sniff, но вместо того, чтобы уменьшать петли на 50%, я фактически увеличил их на 500%. Опять же, это заставило тропы стать еще более выраженными. Кажется, однако, что это утолщение является асимптотическим - другими словами, существует предел тому, насколько толстым я могу заставить тропы быть с помощью настройки параметров скорости анимации.
== EDIT 2 ==
В другом комментарии @GGG я пошел редактировать изображение, чтобы добавить некоторые прозрачные данные, пытаясь найти подходящее обходное решение. То, что я увидел, было то, что изображение вытолкнуло верхний и левый края холста ( "холст Photoshop", а не "HTML5 <canvas>
" ). Когда я добавил равное заполнение прозрачных данных на верхнюю и левую стороны, проблема полос исчезла. Здесь был оригинальный PSD (предварительный добавочный-дополнительный-интервал):
Итак, тогда мой вопрос становится: даже если изображение заполняет (с непрозрачными пикселями) всю полноту его [Photoshop] холста, почему мой контекст canvas clearRect()
ведет себя сам? Должно ли это не стереть что-либо в пределах холста? Если да, то почему он оставляет эти несколько пикселей?
== EDIT 3 ==
После некоторых исследований выяснилось, что Cairo довольно часто используется несколькими основными механизмами рендеринга (по крайней мере, WebKit и Gecko), Может ли это быть так, как предположил @JonasWielicki, что библиотека Каира - когда оптимизирована для мобильного исполнения - возможно, немного переусердна?