Question

我做了一个小脚本，根据用户输入（类型：数字）动态绘制画布，它需要工作但问题是在Android设备上，当用户隐藏软键盘时，画布被删除。这是一种预防方法吗？感谢任何帮助这是代码

        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事件中调整画布大小，但它不会再次调用您的绘图函数，因为修改了width和{{height画布的1}}重置它的上下文（它确实清除它，但也重置任何属性，如fillStyle，变换矩阵，剪切区域等。）

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

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

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

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

Canvas在android上用软键盘消失

1 个答案: