イメージはキャンバスに読み込まれていませんか？

私はキャンバスにイメージをロードしようとしていると、すべてを試した後働いていません...イメージはキャンバスに読み込まれていませんか？

Javascriptを：私のように、自分のコードに何か問題が表示されていない

var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 
var start = new Image(); 

start.onload = function(){ 
    context.drawImage(start, 0, 0, start.width, start.height, 0, 0, 
    canvas.width, canvas.height); 
    } 

start.src = "hangman0.png";

私はこのイメージを描画しようとしているし、スケールはキャンバスの幅と高さになりますが、ピクチャは何に関係なく表示されません。すべてのポインタ？私はHTML5とCSSコードの両方を変更しようとしましたが、まだ役に立たないです。

CSS：

canvas{ 
    background-color: rgb(0,198,255); 
    border-style: ridge; 
    border-width: 5px; 
    border-color: rgb(157,255,0); 
    position: relative; 
}

HTML5：助けを事前に

<body> 
    <div id='section'> 
     <canvas id='myCanvas' width='979px' height='560px'></canvas> 
     <script src="projectJavaScript.js"></script> 
    </div> 
</body>

ありがとう！

出典

2016-04-21 Herman Lee Tzer Her

-1

イメージソースが使用された後、イメージソースが呼び出されたときにデフォルトの空白状態を使用していたように見えることがあります。

start.onloadを使用しているように見えますが、startは要素ではありませんが、要素を表すvarbleは元のhtml要素の一部ではないためロードされません。私はあなたの提供のコードがいる限り、私はwindow.onloadを使用して私の作品canvas.onloadを使用するか、body.onloadで

出典

2016-04-21 20:27:14 matthew1124

それを実行します：

あなたはwindow.onload内scriptコードをラップしていますか？

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

    var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 
    var start = new Image(); 

    start.onload = function(){ 
     context.drawImage(start, 0, 0, start.width, start.height, 0, 0, 
     canvas.width, canvas.height); 
     } 

    start.src = "https://dl.dropboxusercontent.com/u/139992952/multple/rainy.png"; 

}); // end window.onload 
</script>

サンプルコードとデモ：

注：StackSnippetsが自動的にwindow.onload内JS-スクリプトコードをラップ

var canvas = document.getElementById('myCanvas'); 
 
var context = canvas.getContext('2d'); 
 
var start = new Image(); 
 

 
start.onload = function(){ 
 
    context.drawImage(start, 0, 0, start.width, start.height, 0, 0, 
 
    canvas.width, canvas.height); 
 
    } 
 

 
start.src = "https://dl.dropboxusercontent.com/u/139992952/multple/rainy.png";

body{ background-color: ivory; } 
 
canvas{border:1px solid red; margin:0 auto; }

<canvas id='myCanvas' width='979px' height='560px'></canvas>

出典

2016-04-21 20:28:44 markE

申し訳ありませんが、私は」私はかなり新しくて、いくつかのJS用語ではあまりよくありません。 s、window.onloadの中にスクリプトコードをラップすることはどういう意味ですか？私のjavascriptコードは、独自のファイルにあり、私はHTMLファイルからスクリプトを呼び出しています。私もあなたのコードを試して、まだ何も描画していません:( –

"ラップ"はあなたのコードを何かの中に入れることを意味します - この場合、あなたのコードを関数['function（）{YOUR-CODE}']あなたのJSを実行しようとする前に、ブラウザがあなたのウィンドウをロードするのを待ちます。したがって、外部のJSファイルでは、一番下に 'window.onload =（function（）{'を、 '}' ） – markE

今はラッピングをしましたが、私の全体のページをちょっとグリッチしています。写真を描いていますが、ページ全体が白く点滅しています。ページが読み込みを終了しません。しかし、少なくともそれはまったく変わっていない前に比べて何かしています、ありがとう！私はこの不具合を最初に解決しようとします。 –

イメージはキャンバスに読み込まれていませんか？

答えて

関連する問題