デスクトップ上でうまく動作する2Dキャンバスの回転を行っていますが、モバイルスペースには小さな問題が1つあります。ここでは、スクリーンショットにズームインします：モバイルブラウザで<canvas>ローテーションが表示されるのはなぜですか？
親指の画像を500ミリ秒にわたって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, 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の、クロム、サファリ、オペラ、さらにはIEの最新の化身）は、次のデバイスやブラウザ：
- iPhone 3GS：サファリ、Opera Miniは
- iPhone 4S：Safariの
- のiPad（第一世代）：Safariの
- アンドロイドギャラクシーS（ジンジャーブレッド付き）：デフォルトのブラウザは、Firefoxのモバイル
- モトローラドロイドX（ジンジャーブレッド付き）：デフォルトのブラウザは、Firefoxのモバイル
- 私はそうではありません行動
- を示す（
<canvas>をサポート）、デスクトップブラウザを見つけた私は、が展示動作しないモバイルデバイスを発見していない - 掲載画像でズームアップのスクリーンショットのiPad から
<canvas>（回転中）は、（jQueryを使用して）アニメーション化され、その背後の画像を通過して停止し、スクリーンショットに表示されます。- ページにも2番目の
<canvas>があります。これは、同じサムズアップ.pngを使用し、上に掲載された同じコードを使用して回転し、別の背景画像を通過するようにアニメートされます（ただし、反対方向に1つの「サムズアップ」は北西に移動し、 ）、キャンバスのコンテキストと同じ位置に同じように表示されます。
私はこの壁にすべての泥を投げ入れました。何かが診断につながることを期待しています。誰もこれの前にこのような何かを見たことがありますか？どうしたら違うのですか？ HTML5のチュートリアルサイトで大きな赤い警告ラベルが表示されていましたか？ @のGGGさんのコメントパー
== EDIT 1 ==
、私は同じを使用している場合、モバイルブラウザのすべてが一気飲みので、キャンバスの数や頻度を減少させるように設計されたUAのスニフが（再描画削除デスクトップのような設定）、しかし、それはちょうどトレイルがより顕著になるようにしました（例えば、より厚い）。私はUAスニフを入れて実験しましたが、ループを50％減らす代わりに、実際にをに500％増やしました。再び、これにより、トレイルがさらに顕著になった。しかし、この肥厚化は漸近的であると思われます。言い換えれば、アニメーション速度のパラメータを微調整することで、どれくらいの厚さにすることができるかには限界があります。
== EDIT 2 == @のGGGの他コメントパー
、私は、適切な回避策を見つけるための試みで、いくつかの透明データを追加する画像を編集行くに行きました。私が見たことは、画像がキャンバスの上端と左端に直面して突出さ（つまり、「HTML5 <canvas>の」ない「Photoshopのキャンバス、の」だ）ということでした。透明なデータの均等なパディングを上部と左側に追加すると、ストリーキングの問題は消えました。
だから私の質問は、その後、次のようになります：ここでは、元のPSD（事前私を-追加補足間隔が）であった場合でも、（非透明なピクセルを含む）画像塗りつぶしの[フォトショップ]の全体キャンバス、なぜ私のキャンバスのコンテキストclearRect()自体が動作していないのですか？それはキャンバスの範囲内で何かを消さないでしょうか？もしそうなら、なぜこれらの少数のピクセルを残していますか？
== EDIT 3 ==
いくつかの研究の後、それはCairoはかなり一般的にいくつかの主要なレンダリングエンジン（少なくともWebKitのとのGecko）で使用されていることが判明しました。 @JonasWielickiが最初に示唆したように、カイロ図書館は、モバイル実行のために最適化された場合、おそらく少し過激ですか？コメント当たり
モバイルUAスニッフィングで回線を削除するとどうなりますか？ –
@GGGトレイルがより顕著になります（少し太くなります） –
これは私のバグのようです。あたかもブラウザが不必要な再描画を避けるためにあまりにも多くを最適化するかのように。私は、ブラウザ開発者のいずれかにトークバックすることを提案します。興味深い考えはすべての人に起こるということです。 –