Question

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

<html> 
    <body>
          (1)<canvas id="cs"></canvas>
          (2)<img src="/image.png" id="img"/> 
    </body> 
</html>

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

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

Answer 1

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

$().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

这是你的所有代码吗？

您需要先设置画布：

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/

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

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

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

2 个答案: