Question

drawImage canvas方法在'img'元素有机会完全加载之前运行，所以我需要你的帮助来解决这个问题。

<canvas id="drawImage" width="900" height="900" style="">  </canvas>
<img id="img" src="images/fb.png"/>

<script type="text/javascript">

    var canvas  = document.getElementById("drawImage");
    var cont = canvas.getContext("2d");
    var img = document.getElementById("img");
    cont.drawImage(img , 100 , 100);

</script>

我尝试使用此代码绘制图像，但它没有绘制任何内容

Answer 1

据我所知，你无法在画布中放置任何DOM元素。但你可以尝试将图像放在画布中

var example = document.getElementById("example"),
ctx = example.getContext('2d'), // context
pic = new Image();              // creating new image
pic.src = 'http://habrahabr.ru/i/nocopypast.png'; //source
pic.onload = function() { // Waiting till load
    ctx.drawImage(pic, 0, 0);
} // Draw image when it's loaded

Answer 2

首先，你的代码来绘制＆＃39; img＆＃39;元素到画布是正确的。

一个问题是该代码在＆＃39; img＆＃39;之前运行。元素有机会完全加载。

因此，在页面元素完全加载之前，您必须告诉浏览器不要运行您的javascript。

您可以通过将{j}包含在window.onload中来告诉浏览器：

<script>
window.onload=(function(){

    var canvas  = document.getElementById("drawImage");
    var cont = canvas.getContext("2d");
    var img = document.getElementById("img");
    cont.drawImage(img , 100 , 100);

}); // end $(function(){});
</script>

注意： Html Canvas旨在读取img元素中的像素。 Canvas不能与其他canvas元素一样（你在问题中提到了div）。有一个插件脚本可以将html转换为画布图：http://html2canvas.hertzen.com/

drawImage canvas方法在'img'元素有机会完全加载之前运行

2 个答案: