画布在Android上使用软键盘消失

Question

我做了一个小脚本，其中根据用户输入（类型：数字）动态绘制画布，它需要工作，但问题是在android设备上，当用户隐藏软键盘时，画布将被擦除。 这是防止这种情况的方法吗？ 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();
});

和网址： http : //multiplier.hyperion-web.com/

Answer 1

我没有在Android设备上尝试过，但是由于您的调整大小事件监听器不正确，您的问题更有可能出现。

该处理程序会在每个resize事件中调整画布的resize ，但不会再次调用您的绘图函数，这会留下一个空白的画布，因为修改画布的width和height重置其上下文（它会清除它，但也会重置所有属性，例如fillStyle ，转换矩阵，剪切区域等）。

调用和隐藏软键盘将触发resize事件。

因此，为您提供的解决方案是修复事件处理程序，以便在设置画布的新尺寸后重绘所有内容。

为此，您必须将绘图函数存储在单独的变量中，然后将其附加到输入事件中，并在调整大小事件侦听器中对其进行调用。

ps：即使将width或height属性设置为与它们相同的值，也会重置整个上下文