1

HTML5 キャンバスと JavaScript を使用して基本的なゲームを作成しています。1 ～ 10 の数字の画像の配列と、1 ～ 10 の数字のウェールズ語の別の配列があります。

私がやりたいのは、画像配列からランダムな要素を選択し、単語配列からランダムな要素を選択して、両方をキャンバスに表示することです。次に、ユーザーは目盛りをクリックして、単語が正しい数字を表しているかどうかを示し、そうでない場合は十字をクリックします。

問題は、配列要素をキャンバスに描画する方法がわからないことです。描画される要素をランダムに選択する方法を考える前に、機能することをテストするためだけに使用する次のコードがあります。

function drawLevelOneElements(){
            /*First, clear the canvas */
            context.clearRect(0, 0, myGameCanvas.width, myGameCanvas.height);
            /*This line clears all of the elements that were previously drawn on the canvas. */
            /*Then redraw the game elements */
            drawGameElements();
            /*Now draw the elements needed for level 1 (08/05/2012) */
            /*First, load the images 1-10 into an array */
            var imageArray = new Array();
            imageArray[0] = "1.png";
            imageArray[1] = "2.png";
            imageArray[2] = "3.png";
            imageArray[3] = "4.png";
            imageArray[4] = "5.png";
            imageArray[5] = "6.png";
            imageArray[6] = "7.png";
            imageArray[7] = "8.png";
            imageArray[8] = "9.png";
            imageArray[9] = "10.png";

            /*Then create an array of words for numbers 1-10 */
            var wordsArray = new Array();
            wordsArray[0] = "Un";
            wordsArray[1] = "Dau";
            wordsArray[2] = "Tri";
            wordsArray[3] = "Pedwar";
            wordsArray[4] = "Pump";
            wordsArray[5] = "Chwech";
            wordsArray[6] = "Saith";
            wordsArray[7] = "Wyth";
            wordsArray[8] = "Naw";
            wordsArray[9] = "Deg";

            /*Draw an image and a word to the canvas just to test that they're being drawn */
            context.drawImage(imageArray[0], 100, 30);
            context.strokeText(wordsArray[3], 500, 60);
        }

しかし、何らかの理由で、ブラウザの firebug コンソールでページを表示すると、次のエラーが表示されます。

JavaScript 引数 arg 0 [nsIDOMCanvasRenderingContext2D.drawImage] context.drawImage(imageArray[0], 100, 30); を変換できませんでした。

これが配列要素0の画像にアクセスする方法であるかどうかはわかりません...誰かが私が間違っていることを指摘してもらえますか?

* 編集 *

配列の下のコードを次のように変更しました。

var image1 = new Image();
            image1.src = imageArray[0];

            /*Draw an image and a word to the canvas just to test that they're being drawn */
            context.drawImage(image1, 100, 30);
            context.strokeText(wordsArray[3], 500, 60);

しかし、何らかの理由で、wordsArray の要素のみがキャンバスに描画されます。imageArray の画像要素はまったく表示されません。

何か案は？

4

4 に答える 4

1

srcを配列値に設定してjavascriptイメージを作成する必要があります

        var img = new Image();
        img.src = imageArray[0];

        ctx.drawImage(img, 100, 30);

そうしないと、たとえば「1.png」の文字列を描画するようにキャンバスに要求しようとしますが、これはここで求めているものではありません。

于 2012-05-09T09:43:53.273 に答える
0

これは古いものですが、画像が表示されない理由は、おそらくonLoadを呼び出してから、次のようにsrcを設定する必要があるためです。

var img = new Image();
img.onLoad = function() {ctx.drawImage(img, 100, 30);};
img.src = imageArray[0];
于 2013-02-19T15:41:35.550 に答える
0

これは drawGameElements() のコードです

/* This function draws the game elements */
        function drawGameElements(){

            /* Draw a line for the 'score bar'. */
            context.moveTo(0, 25);
            context.lineTo(700, 25);
            context.stroke();

            /* Draw current level/ total levels on the left, and current score on the right. */
            context.font = "11pt Calibri"; /* Text font & size */
            context.strokeStyle = "black"; /* Font colour */
            context.strokeText(currentLevel + "/" + totalLevels, 10, 15);
            context.strokeText(currentScore, 650, 15);
        }

文字通り、キャンバス上に「スコアバー」を描画するだけです。これは、上部、現在のレベル/合計レベル、およびユーザーの現在のスコアを横切る線です。この関数が表示するための要素が正しく表示されているため、これは問題ではないと思います。

于 2012-05-09T12:53:37.117 に答える