Mobil tarayıcılarda neden <canvas> rotasyonlu çizgiler görüyorum?

Question

Masaüstünde oldukça iyi çalışan bir 2d tuvalin dönüşünü gerçekleştiriyorum, ancak mobil alanda küçük bir sorun var. İşte ekran görüntüsünde yakınlaştırılmış:

başparmak görüntü 500ms boyunca 0.2rad etrafında döndürülür. Düşünüyorum ne bütün ilgili kod aşağıda satır içi. Gördüğünüz gibi, görüntünün üst köşelerinin her biri tarafından bırakılmış bir çeşit "iz" vardır.

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); 

Notlar: Kod masaüstünde çok iyi çalışıyor

1. Ive'sınav
2. (Firefox, Chrome, Safari, Opera ve hatta IE en son enkarnasyonları) Aşağıdaki cihazları ve tarayıcılar:
   1. iPhone 3GS: Safari, Opera Mini
   2. iPhone 4S: Safari
   3. iPad (1 nesil): Safari
   4. Android Galaxy S (zencefilli ile): Varsayılan tarayıcı, Firefox mobil
   5. Motorola Droid X (zencefilli ile): Varsayılan tarayıcı, Firefox mobil
3. I have not davranışı
4. sergiler (<canvas> destekler) bir masaüstü tarayıcısı buldum sergi davranış değil bir mobil cihaz bulamadı
5. yayınlanmıştır resimdir yakınlaştırılmış ekran iPad
dan
6. Önemli ise, <canvas> (döndürme) arkadaki görüntüde geçiş yapmak için hareketlidir (jQuery aracılığıyla) ve ekran görüntüsünde görünen bir durma noktasına gelir.
7. Ayrıca sayfada <canvas> ikinci sırada bulunmaktadır. Aynı başparmak-up .png kullanır ve yukarıda belirtilen aynı kodu kullanarak döner ve aynı zamanda farklı bir arka plan görüntüsü boyunca geçiş için canlandırılmıştır (ama ters yönde, yani, bir "başparmak yukarıya" kuzeybatıya ve bir güneydoğuya doğru hareket eder) ve yollar da tuval bağlamına göre aynı yerde görünür.

Bu duvardaki tüm çamurları, bir şeyin teşhise yol açabileceğini ümit ederek düşündüm. Daha önce böyle bir şey gören oldu mu? Ne farklı deneyebilirim? Bir HTML5 eğitim sitesinde, bu tür davranışlara dikkat çeken bazı büyük kırmızı uyarı etiketlerini kaçırdım mı?

== DÜZENLEME 1 @ GGG en Başına yorum ==

, Mobil tarayıcılar tüm çuf aynı kullanmak yeniden çizer çünkü eğer sayı ve tuval sıklığını azaltmak üzere tasarlanmıştır UA kokla (kaldırıldı masaüstünde olduğu gibi) ancak bu sadece rotaların daha belirgin olmasına neden oldu (örneğin daha kalın). Ben daha sonra UA burnunu sokarak denedim, ancak döngüleri% 50 azaltmak yerine, aslında onları% 500 artırdı. Yine bu, izlerin daha da belirginleşmesine neden oldu.Ancak, bu kalınlaşmanın asimptotik olduğu, diğer bir deyişle, animasyon hızının parametrelerini ayarlayarak izlerin ne kadar kalın olmasına neden olabileceğine dair bir sınır var gibi görünmektedir.

== DÜZENLEME 2 @ GGG en diğer Başına yorum ==

, ben uygun bir çözüm bulmak için bir girişim bazı şeffaf veri eklemek için görüntüyü düzenlemek gittim. Gördüğüm şey, resmin tuvalin üst ve sol kenarlarına doğru eğilmesiydi (bu, "HTML5 <canvas>'dan" değil "Photoshop kanvasından"). Üst ve sol taraflara eşit miktarda şeffaf bir veri eklediğimde, çizgi problemi ortadan kalktı.

Benim soru şuna dönüşür:: Burada orijinal PSD (pre beni-ekleme-ekstra boşluk) bile (şeffaf olmayan piksel) görüntü dolguları onun [Photoshop] tamamı tuval, neden benim bağlamında clearRect() davranıyor? Bu, tuvalin sınırları içinde hiçbir şeyi yok etmemeli mi? Eğer öyleyse, neden bu birkaç pikselden ayrılıyor?

== DÜZENLEME Biraz araştırmadan sonra 3 ==

, bu Cairo oldukça yaygın birkaç büyük render motorları (en azından WebKit ve Gecko) tarafından kullanılır çıkıyor. @JonasWielicki'nin ilk önerdiği gibi, Kahire kütüphanesi - mobil uygulama için optimize edildiğinde - belki de biraz aşırıya kaçabilir mi?

Answer 1

Yorumlar başına, geçici bir piksel olarak görüntünün kenarına geçici bir piksel olarak eklemeyi deneyin.

Bunun neden olduğu hakkında hiçbir fikrim yok. Ben düşünün mobil cihazlarda alfa kanalları tuhaf işlemekle ilgisi var, ama bu bir tahminden başka bir şey değil.

Mobil tarayıcıların kaydırma yaparken alfa kanalı düşürdüğünü veya “tahmin ettiğini” belirledim (yavaşça yukarı ve aşağı kaydırma, yazı tipleri bile daha gevrek görünüyor). İki aşamada işler yapıp yapmadıklarını, ikinci aşama için alfa kanalını bırakıp bırakmadıklarını ve eğer mevcut bir "çerçeve" yi takip etmek için başka bir "çerçeve" varsa ikinci aşamayı atlayıp atmadıklarını merak ediyorum. Belki de bu, işleyiciyi, bulunduğu yerdeki şeyleri çizmediğini düşünerek karıştırır. Her neyse, bu muhtemelen bir hata raporu gerektirmektedir. Başka bir şey olmasaydı neler olduğuna dair gerçek bir açıklama duymak isterim.