Question

在我的移动网站上，我有几页，底部有一个标签导航栏，用户可以在它们之间导航。在其中一个页面上，我有一个用户可以使用的画布。问题是，每当我移动到一个页面然后回到画布页面时，我会看到旧画面一秒钟，但随后它会被清除。

我认为这是因为每次进入页面时页面都会重新初始化，所以如何防止这种情况？

我已经尝试过缓存页面，这似乎没什么帮助...还有其他想法吗？

Answer 1

你应该在jQuery mobile pagebeforeshow上清除画布。

用户导航到的第一页将始终保留在DOM中，因此如果该页面包含画布并且用户转到另一页并返回，则必须手动重置canvas元素。

此问题显示如何重置画布 - how to clear canvas for redraw。

所以你的代码应该是这样的：

$(document).on("pagebeforeshow", "div.id_or_class_of_page(s)_with_canvas", function () {
    ctx = _your_canvavs_element;

    ctx.save();
    // Use the identity matrix while clearing the canvas
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Restore the transform
    ctx.restore();
});

不确定画布代码。

在标签之间移动时，防止jQuery mobile重新初始化页面

1 个答案: