將圖像放在html畫布中

Question

我不想/想知道如何在html中隱藏圖像，而只是通過javascript將它們放在畫布中。 我現在在做的是：

在身體然后：

<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>

我試圖將圖像放在畫布上，但沒有找到方法，我只是從W3Schools學習。

Answer 1

這里有一個快速演示在這里 。

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);
}

Answer 2

HTML

<canvas id="gameCanvas"></canvas>

CSS

#gameCanvas { 
    border: 1px solid white; 
    width: 400px; 
}

JS

var canvas = document.getElementById('gameCanvas'),
context = canvas.getContext('2d');

make_base();

function make_base()
{
  base_image = new Image();
  base_image.src = 'img/cerealBox.png';
  base_image.onload = function(){
    context.drawImage(base_image, 400, 200);
  }
}

Answer 3

HTML

 <img id="myImage" src=""></img>

JavaScript的：

 var imgEl = document.getElementById("myImage");
 imgEl.setAttribute("src", "/Images/MyImages/Album1/myPic.jpg");