キャンバスがアンドロイドのソフトキーボードで消える

Question

ユーザー入力（タイプ：番号）に応じてキャンバスを動的に描画する小さなスクリプトを作成しましたが、作業は必要ですが、アンドロイドデバイスの場合はユーザーがソフトキーボード、キャンバスが消去されます。それを防ぐ方法ですか？ここで任意のヘルプ ためのTHXは、コード

 var form = document.querySelector("form"), 
canvas = document.getElementById("canvas"), 
positions = []; 

if (!canvas) { 
alert("Impossible de récupérer le canvas"); 
} 

window.addEventListener("resize", function() { 
if (window.innerWidth < 500) { 
    canvas.width = window.innerWidth * 0.8; 
    canvas.height = window.innerWidth * 0.8; 
} else { 
    canvas.width = 600; 
    canvas.height = 600; 
} 
}); 

var context = canvas.getContext("2d"); 
if (!context) { 
alert("Impossible de récupérer le contexte"); 
} 

form.addEventListener("input", function() { 

var table = form.table.value, 
    modulo = form.modulo.value, 
    centerX = canvas.width/2, 
    centerY = canvas.height/2, 
    rayon = (canvas.width - 5)/2; 
context.lineWidth = 2; 
context.strokeStyle = "#21A8A3"; 

context.clearRect(0, 0, canvas.width, canvas.width); 

for (var i = modulo; i >= 0; i -= 1) { 
    var angle = (2 * Math.PI/modulo) * i - (Math.PI/2); 
    positions[i] = { 
     x: centerX + rayon * Math.cos(angle), 
     y: centerY + rayon * Math.sin(angle) 
    }; 
} 

context.beginPath(); 
context.arc(centerX, centerY, rayon, 0, Math.PI * 2); 
var j = positions.length - 1; 
for (j; j >= 0; j -= 1) { 
    var next = j * table; 
    context.moveTo(positions[j].x, positions[j].y); 

    context.lineTo(positions[next % modulo].x, positions[next % modulo].y); 
} 
context.stroke(); 
}); 

とURLです：http://multiplier.hyperion-web.com/

Answer 1

私は、Androidデバイス上で試したしませんでしたが、あなたの問題はあなたの悪いresizeイベントリスナーに可能性が高いです。

このハンドラは、各resizeイベントであなたのキャンバスのサイズを変更しませんが、それはwidthとキャンバスのheightを変更するので、再び空のキャンバスをあなたに残し、あなたの描画関数を呼び出していませんが、そのコンテキストをリセットします（それが明確にありませんそれだけでなく、fillStyle、変換行列、クリッピング領域などの任意のプロパティをリセットします）。

ソフトキーボードを呼び出して非表示にすると、resizeイベントが発生します。

したがって、イベントハンドラを修正して、キャンバスの新しい寸法を設定した後にすべてを再描画するようにしてください。

このためには、描画関数を別の変数に格納してから入力イベントにアタッチし、リサイズイベントリスナーで呼び出す必要があります。

シモンズ：でも、彼らは全体のコンテキストをリセットしますた同じ値にwidthまたはheight属性を設定