Question

var c = document.getElementById("c");
var ctx = c.getContext("2d");

/*$("canvas").mousemove(function (event) {
    imj.x = event.pageX - 80;
    imj.y = event.pageY - 80;
});*/

function img(image, x, y, sorc) {
    image.onload = function () {
        ctx.drawImage(image, x, y);
    }
    image.src = sorc;
}

var imj = {
    img: new Image(),
    x: 0,
    y: 0
};
function render() {
    ctx.clearRect(0, 0, c.width, c.height);
    img(imj.img, imj.x, imj.y, "http://sr.photos3.fotosearch.com/bthumb/CSP/CSP823/k8237713.jpg");
    imj.x += 1;
    imj.y += 1;
}

setInterval(function () { render(); }, 40);

当我加载此代码（以及HTML）时，它在我的笔记本电脑上工作正常，但在我的Nexus 7上，图像显示一次然后消失。如果我让图像保持原位，它会显示在我的平板电脑上。为什么？（您可以自己尝试或查看此处的所有代码http://pixelempire.t15.org/mobile.html）

Answer 1

我不知道这是你遇到的问题，但我会尝试和帮助。我怀疑它与您的浏览器有什么关系。类似的东西发生在我身上，基本上是图像没有加载，尝试在不同的屏幕上预加载图像或将它们加载到你试图显示它们的屏幕上，然后将它们绘制到画布上。

这是一个链接，其中包含一些预加载图像的示例

http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

HTML5 Canvas动画图像不会在移动设备浏览器中加载

1 个答案: