Question

所以我正在开展一个小项目只是为了好玩，我学到了一些关于画布的东西，我写了一个脚本（现在已经不见了）只是将图像画到画布上，它没有用，所以我删除了它。所以我去了w3schools并拿了他们的示例代码，它仍然无效。你可以在这里查看：http://zach.muny.us/widgets/onlineedit我没有任何错误，没有任何错误。只是希望有人知道修复o.O

<!DOCTYPE html>
<html>
<body>

<p>Image to use:</p>
<img id="scream" src="http://www.w3schools.com/html/img_the_scream.jpg" alt="The     Scream" width="220" height="277"><p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

</script>

</body>
</html>

Answer 1

图像可能尚未加载，使用图像的加载事件在加载时绘制图像

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
document.getElementById("scream").onload = function(){
   ctx.drawImage(this,10,10);
};

</script>

http://jsfiddle.net/mowglisanu/DxT4u/

Answer 2

您需要将其包含在window.onload()。

中

window.onload = function() {
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById("scream");
    ctx.drawImage(img,10,10);
}

我的画布不是仅在我的服务器上绘制图像

2 个答案: