gpt4 book ai didi

javascript - 为什么 context.drawImage() 在 html Canvas 中不起作用?

转载 作者:行者123 更新时间:2023-11-30 12:35:32 25 4
gpt4 key购买 nike

我试图将图像文件“sticky.png”放入 Canvas 框中,但我得到的只是一张空白 Canvas 。谁能指出我做错了什么和/或给我有效的代码?

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

<body>

<script>

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var sticky = new Image();
sticky.onload = function() {
context.drawImage(sticky, 0, 0);
sticky.src = "sticky.png";
};


</script>

</body>

最佳答案

您需要在 sticky.onload 之前包含 sticky.src

<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var sticky = new Image();
sticky.src = "sticky.png";
sticky.onload = function() {
context.drawImage(sticky, 0, 0);
};

</script>
</body>

Fiddle

关于javascript - 为什么 context.drawImage() 在 html Canvas 中不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26186381/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com