html5 canvas图像阵列 - 将图像绘制到画布

我使用HTML5 canvas和JavaScript来制作基本游戏，并且我有一个数字1-10的图像数组，然后为威尔士另一个数组字数为1-10。html5 canvas图像阵列 - 将图像绘制到画布

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

问题是我不知道如何绘制一个数组元素到画布。我有以下的代码，我打算用只是为了测试它的作品，之前我想想如何使绘制的元素随意选择：

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控制台，我得到的错误：

Could not convert JavaScript argument 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元素被吸引到canvas- imageArray中的图像元素根本不显示。

任何想法？

来源

2012-05-09 Someone2088

创建的jsfiddle将帮助我们 – frosty

对不起，我不不知道JSFiddle是什么？我如何创建一个？ – Someone2088

对不起。有一个很酷的网站叫JSFiddle。你可以去那里做一个简单的模拟你的代码，然后你可以与我们分享，我们可以更容易地解决你的问题。 – frosty

您需要创建一个JavaScript图片与它的src设置为您的数组值

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

     ctx.drawImage(img, 100, 30);

没有这样做，你要问画布绘制的“1.png”的字符串，例如其中不是你在这里之后！

来源

2012-05-09 09:43:53 dougajmcdonald

感谢您的回复。我已经完成了你所说的话，但由于某种原因，只有这个词被画在画布上 - 图像不是。我已更新我的原始帖子，以显示我所做的事情。 – Someone2088

我认为唯一能阻止正在绘制图像的东西就是路径。您的图片位于网站根目录的哪个位置？在firefox中，在firebug中，你应该能够看到GET请求被提交给'1.png'等。我希望那些被显示为404的？ – dougajmcdonald

我以为404是'页面未找到'错误？他们不是404，图像只是没有被显示。该图像是一个.png文件，它与我试图在其上显示的网页位于同一根目录中。这与我试图在HTML5画布上显示图像有关，但我无法弄清楚问题所在。 – Someone2088

这是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-09 12:53:37 someone2088

好吧，它似乎已经开始工作了。感谢您的全力帮助 – someone2088

实际上，它似乎只是有时候工作......有时在出现iamge之前需要在画布上点击几下，有时候它根本不会出现......它似乎完全是随机的至于图像是否出现在第一次点击上（点击按钮） - 是否应该出现，或者它是否出现在画布上的后续点击中，或者它是否完全不出现......我真的很困惑这样。有什么建议么？ – someone2088

图像未显示，因为它尚未被服务器收集（这也出现在专业字体中）。每次尝试加载之前尚未加载的图像时，都会发送GET请求。这意味着某些图像需要一段时间才能使用。解决这个问题的简单方法是在每次加载图像时创建一个setTimeout（），或者循环并在开始时加载所有图像，以便在需要时调用它们。 – bluevial

这是一个古老的，但为什么图像无法显示的原因可能是因为你要调用的onLoad然后设置src就像这样：

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

来源

2013-02-19 15:41:35 WikiPlugs

html5 canvas图像阵列 - 将图像绘制到画布

回答

相关问题