質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

4593閲覧

JavaScript ctx drawImageが使えません

Tan3

総合スコア39

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/01/16 07:09

###シューティングゲームを始めて作ります。
JavaScriptでシューティングゲームを作っています。画像を描画したいのですが、どこか書き間違えてるみたいで、表示されません。初心者向けに書かれたサイトを見ながら作成しているのですが、うまくいきません・・・(こちらのサイトです。綺麗にまとめられていて、読みやすいです。http://lambdalisue.hatenablog.com/entry/2013/12/25/160910

###発生している問題・エラーメッセージ
画像が描画されません。coxのdrawImage(img.x,y)というメソッドが使えません。
サイト中ほどのキャンパスに描画するという部分がうまくいきません。

###ソースコード

JavaScript

1"use strict" 2 3var pocket; 4var apple_price, apple_count; 5var orange_price, orange_count; 6 7pocket = 500; 8apple_price = 60; 9apple_count = 3; 10orange_price = 30; 11orange_count = 4; 12 13var balance = pocket - apple_price * apple_count - orange_price * orange_count; 14 15 16console.log("たかしくんの残金は" + balance + "円"); 17 18 19// 全体で使用する変数を定義 20var canvas, ctx; 21//プレイヤーの画像を保持する変数を定義 22var img_player; 23 24//ページロード時に呼び出される処理を指定 25window.onload = function(){ 26 //コンテキストを取得(おまじない) 27 canvas = document.getElementById('screen'); 28 ctx = canvas.getContext('2d'); 29 30 //Playerの画像(id='player')で指定された<img>)を取得 31 img_player = document.getElementById('player'); 32 33 //Playerの画像を(20, 50)の位置に描画 34 ctx.drawImage(img_player, 20, 50); 35}; 36 37// ページロード時に呼び出される処理を指定 38// window.onload = function(){ から }; までの間が呼び出される。 39window.onload = function() { 40 // id を用いてキャンバスオブジェクトを取得し 41 // canvas 変数に代入 42 // 43 // オブジェクト = document.getElementById('id'); 44 // 45 canvas = document.getElementById('screen'); 46 47 // 2次元用の描画コンテキスト(とよばれるナニか)を取得し代入 48 ctx = canvas.getContext('2d'); 49 50 // 塗りつぶしの色を指定(白) 51 ctx.fillStyle = '#fff'; 52 // 塗りつぶされた四角形(横,縦 = 20, 30)を(8, 5)の位置に描画 53 ctx.fillRect(8, 5, 20, 30); 54 55 // 線の色を指定(赤) 56 ctx.strokeStyle = '#f00'; 57 // からっぽの四角形(横,縦 = 90, 10)を(40, 55)の位置に描画 58 ctx.strokeRect(40, 55, 90, 10); 59}; 60 61// 変数 message を定義 62var message; 63// 変数 message に「文字列」を代入 64message = "Hello World"; 65 66// デベロッパーツールにログとして表示 67console.log(message); 68 69// 変数 message2 を定義して「文字列」を代入 70var message2 = "ハローワールド"; 71 72// デベロッパーツールにログとして表示 73console.log(message2);

html

1<!DOCTYPE html> 2<meta charset="UTF-8"> 3<title>Kawaz Advent Calendar 2014-12-25</title> 4<style> 5body{ 6 background: #eee; 7} 8canvas{ 9 background: #000; 10 display: block; 11 margin: auto; 12} 13</style> 14<img id="player" src="img/player.png"> 15<img id="enemy" src="img/enemy.png"> 16<img id="player_bullet" src="img/player_bullet.png"> 17<img id="enemy_bullet" src="img/enemy_bullet.png"> 18<canvas id="screen" width='240' height='320'></canvas> 19<script src="js/shooting.js"></script> 20 21

###補足情報(言語/FW/ツール等のバージョンなど)
JavaScript
CotEditor(バージョン 2.3.4 (95))
Chrome(バージョン 47.0.2526.111 (64-bit))

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

window.onload に対して function を2度割り当てている事が原因でしょう。

この場合、HTML 読み込み時に後に割り当てた方しか動かないため、最初に割り当てたコードは無駄になっています。

まずは、onload に対する処理を別々に書くのではなく、単純に一つにまとめてダラダラと書いてみてはどうでしょうか?

投稿2016/01/16 07:33

ps13zier

総合スコア433

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Tan3

2016/01/16 07:46

回答者さんのおっしゃる通り、一つにまとめたら表示されました。 表示されない理由も説明してくださってありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問