javascript在画布上绘制图像

changbenny

我尝试构建一个JavaScript代码,以便在画布上绘制图像,但是我不知道哪里出了问题。那是我的代码:

<body>
<canvas id = "my_canvas"></canvas>
<script>
function setup(){
    var canvas = document.getElementById('my_canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = 800;
    canvas.height = 600;
    var image = new Image();
    image.src = 'a.png';
    ctx.drawImage(image,5,5);
};
window.onload = setup;
setup();

</script>

问题是,如果我在代码setup();末尾添加一行代码,则图像可以正确绘制,我不知道为什么。

谢谢。

6502

问题是image异步加载,因此,如果您设置源并立即绘制它,则图像位尚不可用,并且未绘制任何内容。

您必须等待图像加载后才能在画布上绘制图像。

将代码更改为

image.onload = function() {
    ctx.drawImage(image, 5, 5);
};
image.src = "a.png";

应该能按预期工作。

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

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

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在缩放的画布上绘制图像

来自分类Dev

在缩放的画布上绘制图像

来自分类Dev

访问画布上的绘制图像

来自分类Dev

javascript画布不会绘制图像

来自分类Dev

在画布上绘制我的可绘制图像?

来自分类Dev

在 Javascript 实例上绘制图像

来自分类Dev

用点在画布上绘制图像

来自分类Dev

如何在画布上分层绘制图像?

来自分类Dev

在画布上绘制图像并作为纹理返回

来自分类Dev

WPF - 在画布上创建和绘制图像

来自分类Dev

在画布内绘制图像

来自分类Dev

画布-从原型中绘制图像

来自分类Dev

画布未绘制图像

来自分类Dev

多个画布未绘制图像

来自分类Dev

飞镖画布未绘制图像

来自分类Dev

画布未绘制图像

来自分类Dev

画布未绘制图像

来自分类Dev

Javascript画布:绘制图片

来自分类Dev

在画布上绘制图像并导出打印质量图像

来自分类Dev

如何从jpeg或png格式的字节数组在画布上绘制图像

来自分类Dev

列表内的HTML5 Canvas,无法在所有画布上绘制图像

来自分类Dev

在画布上绘制图像并保存到SD卡中

来自分类Dev

为什么HTML5 drawImage无法在画布上绘制图像?

来自分类Dev

在画布上循环绘制图像-如何优化此代码?

来自分类Dev

如何从jpeg或png格式的字节数组在画布上绘制图像

来自分类Dev

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

来自分类Dev

在HTML5画布上绘制图像

来自分类Dev

如何在 Vaadin 画布上的框下方绘制图像?

来自分类Dev

如何使用 JavaScript 在 html 画布中为特殊过滤器绘制图像