Question

我正在尝试将图像绘制到Html5 Canvas以与Phonegap一起使用，这是我使用的代码。

问题是没有任何反应我尝试了几乎所有的东西，添加了image.onload，尝试清除仍然没有任何东西被绘制。

我正在使用Phonegap 2.7，在Android 2.3.7（GingerBread）上进行测试。

var canvas = document.getElementById('map');
var ctx = canvas.getContext("2d");
var image = new Image();
image.src="img/map-04.png";
image.onload=function(){            
    ctx.drawImage(image,0,0);
};              
function fitToContainer(canvas){
    var div = $(mapcontext);    
    canvas.style.width=div.css("width");
    canvas.style.height=div.css("height");
    canvas.width  = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;                
}

window.onload = fitToContainer(canvas);
window.onresize = fitToContainer(canvas);

先谢谢。

Answer 1

<强>更新

基于提供的小提琴：

您可以通过执行以下操作来重新组织代码来解决问题：

确保图像在执行任何操作之前已加载
加载图像时，调用绘图函数并附加窗口的
删除绘图函数参数，以便您可以将其直接设置为回调，也可以全局使用已分配的画布变量
在绘图功能中使用窗口的尺寸直接用于画布元素的宽度和高度，不要使用CSS，因为它会拉伸图像（最好重绘将图像拉伸到画布上，以便正确读取鼠标位置等。
每次画布更改尺寸时重绘图像

更新后的代码如下所示（ online live version here ）：

var canvas = document.getElementById('map');
var ctx = canvas.getContext("2d");

var image = new Image();
image.onload = function() {
    window.onresize = fitToContainer;
    fitToContainer();
};
image.src = "http://i.imgur.com/oPt1Nrr.gif";

function fitToContainer() {

    var div = $('#mapcontext'),
        w = $(window).width(),
        h = $(window).height();

    canvas.width = w;
    canvas.height = h;

    ctx.drawImage(image, 0, 0, w, h);
}

希望这有帮助！

旧答案

window.onload或window.onresize的使用是错误的。你需要传递它们参考：

window.onload = window.onresize = function() {fitToContainer(canvas)};

您可以选择在函数回调中获取canvas元素，只需调用无参数函数

window.onload = window.onresize = fitToContainer;

function fitToContainer() { ... } // use global var for canvas

另请注意，调整画布大小会导致它被清除，因此在发生这种情况时您需要重新绘制图像：

function fitToContainer(canvas){
    var div = $(mapcontext);    
    canvas.style.width=div.css("width");
    canvas.style.height=div.css("height");
    canvas.width  = canvas.offsetWidth;     // this will clear canvas
    canvas.height = canvas.offsetHeight;

    if (image && image.complete)
        ctx.drawImage(image, 0, 0);         // redraw image if loaded
}

如果在加载和解码过程中发生错误，您还应该为图像添加onerror处理程序（最佳onabort）。在设置src之前添加这些回调。

无法在Phonegap中的HTML5 Canvas上绘制图像

1 个答案: