javascript - 将图像放入 html Canvas

Question

我不想/想知道如何在 html 中隐藏图像，同时仅通过 javascript 将它们放在 Canvas 中。我现在正在做的是:

然后在体内:

<script language="javascript" type="text/javascript">
                var c = document.getElementById("gameCanvas");
                var ctx = c.getContext("2d");
                var img = document.getElementById("cerealBox");
                ctx.drawImage(img,400,200)

            </script>

我正在尝试将图像放在 Canvas 上，但还没有找到方法，我只是在向 W3Schools 学习。

Answer 1

这是一个快速演示 here .

var c = document.getElementById("gameCanvas");
var ctx = c.getContext("2d");

var img = new Image();
img.src = "http://img2.wikia.nocookie.net/__cb20081209142622/fantendo/images/e/e6/Super_8_Bit_Mario.png";

img.onload = function () {
    ctx.drawImage(img, 50, 50, 800, 600, 50, 50, 100, 60);
}