Canvas verschwinden mit Soft-Tastatur auf Android

Question

Ich habe ein kleines Skript gemacht, wo eine Leinwand dynamisch nach Benutzereingabe (Typ: Nummer) gezeichnet wird, braucht es Arbeit, aber das Problem ist, dass auf Android-Geräten, wenn der Benutzer ausblenden Soft-Tastatur, die Leinwand ist gelöscht. Ist das eine Möglichkeit, das zu verhindern? Thx für jede Hilfe hier ist der Code

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

und die url: http://multiplier.hyperion-web.com/

Answer 1

ich nicht auf einem Android-Gerät versucht haben, aber Ihr Problem ist eher aufgrund Ihrer schlechten Grßenänderungsereignis Zuhörer.

Dieser Handler tun, um Ihre Leinwand an jedem resize Ereignis Größe ändern, aber es wieder Funktionen der Zeichnung nicht aufrufen, die Sie mit einer leeren Leinwand verlässt, da die width und height einer Leinwand setzt seinen Kontext zu modifizieren (es tut klar es, aber auch alle Eigenschaften wie fillStyle, Transformationsmatrix, Clipping-Bereich usw.) zurückgesetzt.

Durch Aufrufen und Verbergen der Softtastatur wird ein Ereignis resize ausgelöst.

Die Lösung für Sie besteht also darin, Ihren Event-Handler so zu reparieren, dass er alles neu zeichnet, nachdem er die neuen Dimensionen des Canvas festgelegt hat.

Dazu müssen Sie Ihre Zeichenfunktion in einer separaten Variablen speichern, sie dann an Ihr Eingabeereignis anhängen und in Ihrem Größenänderungs-Ereignislistener darauf zugreifen.

Ps: auch die Einstellung der width oder height Attribute auf den gleichen Wert waren sie den ganzen Zusammenhang

zurückgesetzt