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

How do I draw an image loaded from the page in a canvas

本文关键字：加载 图像 绘制 布中      更新时间：2023-09-26

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

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

我想知道如何在画布（1）中加载和显示图像（2）（带有drawImage功能）。我试过了，但不起作用：

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

您必须确保您的图像已首先加载。尝试将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

这就是你的全部代码吗？

您需要先设置画布：

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/

相关文章：