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

debugcn 发表于 Dev

艾哈迈德·萨德（Ahmed Saad）

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

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

我正在使用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);

提前致谢。

用户名

更新

根据提供的小提琴：

您可以通过以下方式重新组织代码来解决此问题：

在执行任何操作之前，请确保已加载图像
加载图像后，调用绘制函数并为窗口附加onresize处理程序
删除draw函数参数，以便您可以直接将其设置为回调，也可以全局使用已分配的canvas变量
在draw函数内部，直接将窗口的尺寸用于画布元素的宽度和高度，不要使用CSS，因为那样会拉伸图像（最好将拉伸后的图像重新绘制到画布上，以便可以正确读取鼠标位置等信息）。
画布每次更改大小时都重新绘制图像

更新后的代码如下所示（此处为在线实时版本）：

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。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。