小さなキャンバス アプリを作成しているときに、Android の既定のブラウザーでのみ発生するように見える奇妙な動作に遭遇しました。
globalCompositeOperation「消しゴム」ツールとして機能するように設定されたキャンバスに描画すると'destination-out'、Android ブラウザが期待どおりに動作することがあり、キャンバスのピクセルがまったく更新されないことがあります。
セットアップ:
context.clearRect(0,0, canvas.width, canvas.height);
context.drawImage(img, 0, 0, canvas.width, canvas.height);
context.globalCompositeOperation = 'destination-out';
円を描いてキャンバスからピクセルを消去します。
context.fillStyle = '#FFFFFF';
context.beginPath();
context.arc(x,y,25,0,TWO_PI,true);
context.fill();
context.closePath();
この問題を説明する小さなデモは、http: //gumbojuice.com/files/source-out/で見ることができます 。javascript は、http: //gumbojuice.com/files/source-out/js/main です。 js
これは、複数のデスクトップおよびモバイル ブラウザーでテストされており、期待どおりに動作します。Android ネイティブ ブラウザでは、ページを更新した後に動作することもあれば、何も起こらないこともあります。
再描画を強制するためにキャンバスをピクセル単位で移動する他のハックを見てきましたが、これは理想的な解決策ではありません..
皆さんありがとう。