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

Question

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

问题是什么都没发生我几乎尝试了所有方法，添加了 image.onload，尝试了 clearrect 仍然没有绘制任何内容。

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

Fiddle

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

更新

基于提供的小提琴：

你可以通过重新组织代码来解决这个问题：

• 在做任何事情之前确保图片已经加载
• 加载图像时调用绘图函数并为窗口附加 onresize 处理程序
• 删除绘图函数参数，以便您可以直接将其设置为回调，也可以全局使用已分配的画布变量
• 在绘图函数内部，直接使用窗口的尺寸作为画布元素的宽度和高度，不要使用 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)};

您可以选择在函数回调中获取画布元素并简单地调用无参数函数

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 之前添加这些回调。