Question

我正在使用HTML5画布和JavaScript制作一个基本游戏，我有一个数字1-10的图像数组，然后有另一个数组为数字1-10的威尔士单词。

我想要做的是从images数组中选择一个随机元素，从words数组中选择一个随机元素，并在画布上显示它们。然后，用户将单击一个勾号以指示该单词是否表示正确的数字，如果不表示则表示正确的数字。

问题是我不确定如何将数组元素绘制到画布上。我有以下代码，在我考虑如何使绘制的元素随机选择之前，我将用它来测试它的工作原理：

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中的图像元素根本不显示。

有什么想法吗？

Answer 1

您需要创建一个javascript图像，并将其src设置为数组值

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

        ctx.drawImage(img, 100, 30);

如果没有这样做，你会试图让画布画一个“1.png”的字符串，这不是你在这里所追求的！

Answer 2

这是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);
        }

从字面上看，它所做的只是在画布上绘制一个“分数栏”，它只是顶部的一条线，当前的等级/总等级，以及用户的当前分数。我不认为这是问题，因为这个功能要显示的元素正在正确显示。

Answer 3

这是一个旧的，但图像未显示的原因可能是因为您必须调用onLoad然后设置src，如下所示：

var img = new Image();
img.onLoad = function() {ctx.drawImage(img, 100, 30);};
img.src = imageArray[0];

Answer 4

我通过对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);
    }

html5 canvas图像数组 - 将图像绘制到画布上

4 个答案: