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 中的图像的方式......有人可以指出我做错了什么吗？

* 编辑 *

我已将 to 数组下方的代码更改为：

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

这是 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 回答
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

我使用递归调用 img.onload 方法来绘制图像解决了这个问题。例如：

    var cx = 10;//x initial position to draw
    var cy = 10;//y initial position to draw
    var space = 300; //distance between images to draw
    var imageArray = new Array();
    imageArray[0] = "1.png";
    imageArray[1] = "2.png";
    imageArray[2] = "3.png";
    //etc....
    //build a Image Object array
    var imgs = new Array();
    for(i = 0; i < imageArray.length; i++){
     imgs[i] = new Image();
     imgs[i].src = imageArray[i];//attention if the images are in a folder 
    }
    var ri = 1;//index of images on the array
    imgs[0].onload = function(){
     context.drawImage(imgs[0], cx, cy);
     cy += imgs[0].height + space;
     callDraw(context, imgs, cx, cy, ri, space);
    }

递归函数定义如下：

    function callDraw(context, imgs, cx, cy, ri, space){
     if(ri == imgs.length) 
      return;
     context.drawImage(imgs[ri], cx, cy);
     cy += imgs[ri].height + space;
     ri++;
     callDraw(context, imgs, cx, cy, ri, space);
    }
于 2019-11-28T19:48:55.447 回答