如何在canvas中绘制从页面加载的图像

我有一个像这样的html页面：

  (1) (2)   

我想知道如何在canvas（1）中加载和显示图像（2）（使用drawImage函数）。 我试过这个，但它不起作用：

 var img = $("#img"); ctx.drawImage(img,0,0); 

Answer 1

您必须确保首先加载图像。 尝试将drawImage调用包装在一个准备好的语句中，并确保首先设置canvas对象。

 $().ready(function(){ var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.drawImage(document.getElementById("img"),0,0); }) 

如果您还没有找到它，那么这是一个很好的教程： https ： //developer.mozilla.org/en/Canvas_tutorial/Using_images

Answer 2

这是你的所有代码吗？

您需要先设置canvas：

 var ctx = document.getElementById('cs').getContext('2d'); var img = new Image(); img.src=document.getElementById('img').src; ctx.drawImage(img,0,0); 

这样的东西……

这是jsfiddle的一个例子： http ： //jsfiddle.net/vTYqS/

请注意，由于默认的canvas大小，第一张图片会被切断。 根据您计划复制的图像，您可能需要像这样调整canvas大小：

http://jsfiddle.net/vTYqS/1/