背景画像javascript HTML5 canvas

JavaScriptを使って簡単なゲームを作成しようとしています。何らかの理由で、私は背景イメージを読み込むことができません。繰り返し検索し、さまざまな方法を試しましたが、私は白黒のキャンバスになってしまいました。私の知恵が終わったら、私を助けてください。背景画像javascript HTML5 canvas

<body> 


<!-- Site navigation menu --> 
<ul> 
<li><a href="index.html">Play Game</a></li> 
<li><a href="about.html">About</a></li> 
<li><a href="help.html">Help</a></li> 
</ul> 


<!-- Creating the canvas --> 
<canvas id= "gameCanvas" width="600" height="480"></canvas> 

<script> 
var canvas = document.getElementById("gameCanvas"); 
var ctx = canvas.getContext("2d"); 
var bkGround = new Image(); 
bgImage.src = '/images/backGround.jpg'; 
bkGround.onload = function(){ 
ctx.drawImage(bkGround,69,50); 
} 
</script>

予想感謝：

は、ここに私のコードスニペットです。

出典

2016-10-13 Mortgage1

プロジェクトのフォルダ構造はどのように見えますか？ –

コンソールを確認しましたか？ – Fralec

コンソールにはどのようなエラーがありますか？また、CSSを使用してキャンバスの背景を設定するだけで十分です。フレームごとに背景を再描画する必要がないため、パフォーマンスが向上します。 – Brad

これはonloadイベントと、エラーがあるかどうかを確認するための推奨されるチェックコンソールで読み込みます。

とは何ですか。bgImageは？ bgImage.src = '/images/backGround.jpg';？

body.onload = RenderImage; 
function RenderImage() 
{ 
//Your existing script 
}

出典

2016-10-13 21:30:10 Searching

bkGroundにbgImageを変更するようにしてください。そして、onloadコールバックを設定した後、設定srcの設定を移動します。

だからあなたのコードは次のようになります。

<canvas id= "gameCanvas" width="600" height="480"></canvas> 
<script> 
var canvas = document.getElementById("gameCanvas"); 
var ctx = canvas.getContext("2d"); 
var bkGround = new Image(); 
bkGround.onload = function(){ 
ctx.drawImage(bkGround,69,50); 
}; 
bkGround.src = '/images/backGround.jpg'; 
</script>

出典

2016-10-13 21:36:15 fremail

私はあなたがロードをcompltedましたが、あなたはまた、CSSでこれらのアプローチを使用することができます前に、背景画像を使用しようとすることができると信じています。

CSSを使用して、スタイルブロックで定義することも、JSで動的に設定することもできます。

場合やJSに好む：

document.getElementById("gameCanvas").style.background = "url('/images/backGround.jpg')";

NB - 画像をブラウザへのアクセスであることを確認してください。 JSを使用している場合は、コンソールでエラーをチェックしてください.JSはコードに到達する前にエラーで破損している可能性があります。また、実際の例については、HTML5 Canvas background image

出典

2017-01-23 03:22:07

背景画像javascript HTML5 canvas

答えて

関連する問題