在我的移动网站中,我有几个页面,底部有一个标签导航栏,让用户可以在它们之间导航。在其中一个页面上,我有一个用户可以在上面绘制的画布。问题是,每次我移动到一个页面然后回到画布页面时,我都会看到旧绘图一秒钟,但随后它被清除了。
我认为这是因为每次进入页面时页面都会重新初始化,那么如何防止呢?
我已经尝试过缓存页面,但似乎没有帮助......还有其他想法吗?
在我的移动网站中,我有几个页面,底部有一个标签导航栏,让用户可以在它们之间导航。在其中一个页面上,我有一个用户可以在上面绘制的画布。问题是,每次我移动到一个页面然后回到画布页面时,我都会看到旧绘图一秒钟,但随后它被清除了。
我认为这是因为每次进入页面时页面都会重新初始化,那么如何防止呢?
我已经尝试过缓存页面,但似乎没有帮助......还有其他想法吗?
您应该在 jQuery mobile pagebeforeshow上清除画布。
用户导航到的第一个页面将始终保留在 DOM 中,因此如果该页面包含画布并且用户转到另一个页面并返回,则必须手动重置画布元素。
这个问题显示了如何重置画布 -如何清除画布以进行重绘。
所以你的代码应该是这样的:
$(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();
});
不确定画布代码。