0

だから私は楽しみのために小さなプロジェクトに取り組んでいて、キャンバスについていくつかのことを学び、キャンバスに画像を描くだけのスクリプト（現在はなくなっています）を書きましたが、機能していなかったので削除しました。だから私はw3schoolsに行き、彼らのサンプルコードを取りましたが、それでも機能しません。ここで確認できます：http：//zach.muny.us/widgets/onlineeditエラーは発生せず、何も発生しません。誰かが修正oOを知っていることを願っています

<!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>
4

2 に答える 2

3

画像がまだ読み込まれていない可能性があります。画像の読み込みイベントを使用して、読み込み時に画像を描画します

<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/

于 2012-11-21T23:33:04.793 に答える
1

それをでラップする必要があります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);
}
于 2012-11-21T23:31:59.723 に答える