javascript - 绘制图像()不工作

标签 javascript canvas drawimage

我正在使用 HTML、CSS 和 JavaScript 以及 PhoneGap 为 iPhone 和 Android 制作应用程序。我正在使用 HTML5 Canvas 。我的 ctx.drawImage();功能不起作用,我不明白为什么。这是我的代码。

var imageReady = false;
var image = new Image();
image.onload = function () {
    imageReady = true;
};
image.src = "http://urlToImage.com";
ctx.drawImage(image, 0, 0, 300, 180);

我验证了 src 链接并且它有效。有什么想法吗?谢谢。

最佳答案

您的drawImage调用应该位于异步回调内部(在图像加载时执行)。目前,它是在加载图像之前调用的。

var imageReady = false;
var image = new Image();
image.onload = function () {
    imageReady = true;
    ctx.drawImage(image, 0, 0, 300, 180);
};
image.src = "http://urlToImage.com";

关于javascript - 绘制图像()不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15915488/

相关文章:

javascript - $ ('img' ).show ("slide", direction : "right", 500) 改变img的位置

javascript - 使用 jQuery 进行按键传递

javascript - 使用 JavaScript 函数作为网页的起点

html - 在 HTML canvas 中绘制的文本有边缘

javascript - 渲染bmp文件最快的方法

Java 的 g.drawImage 在 Windows 上比 Linux 上花费的时间明显更长

java - 如何将图片放在屏幕的左上角?

javascript - ReactJS如何在许多应用程序状态之间进行更改

javascript - HTML中高效的毫秒显示

javascript - drawImage 将所有图片调整为相同宽度