Javascript 画布图像在单击事件之前不会加载。。。我想在页面加载时加载，如何加载？_Javascript_Html_Canvas_Onload

Javascript 画布图像在单击事件之前不会加载。。。我想在页面加载时加载，如何加载？

javascript html canvas

Javascript 画布图像在单击事件之前不会加载。。。我想在页面加载时加载，如何加载？,javascript,html,canvas,onload,Javascript,Html,Canvas,Onload,我正在创建战舰，HTML5画布上的棋盘游戏。我在加载页面时加载我的船舶图像时遇到问题。由于某些原因，只有当我点击屏幕上的某个地方时，才会显示船舶图像背景资料： 1.我有2个画布元素，每个元素有2个上下文 2.如果我把PlayerGrid.js放在OpponentGrid.js之前，我必须点击屏幕让我的飞船出现 3.Draw（）用于绘制网格以及从createShips（）创建的图像。createships（）只需创建不同的船舶对象，并为每个对象指定图像 4.我确实尝试在很多地方调用DRAW（），

我正在创建战舰，HTML5画布上的棋盘游戏。我在加载页面时加载我的船舶图像时遇到问题。由于某些原因，只有当我点击屏幕上的某个地方时，才会显示船舶图像

背景资料： 1.我有2个画布元素，每个元素有2个上下文

2.如果我把PlayerGrid.js放在OpponentGrid.js之前，我必须点击屏幕让我的飞船出现

3.Draw（）用于绘制网格以及从createShips（）创建的图像。createships（）只需创建不同的船舶对象，并为每个对象指定图像

4.我确实尝试在很多地方调用DRAW（），onload和createShips（），但它们仍然没有显示出来

有人知道会是什么吗？这是背景冲突还是游说冲突？当我将OpponentGrid.js放在PlayerGrid.js之前时，飞船图像确实会显示出来，但是我的XMLHttpRequest存在一个不值得解决的巨大问题

加载所有内容后，我还应该如何调用我的Draw方法？我是否应该在最后的某个地方调用我的Battleship.html中的my Draw（）

代码和小提琴：


正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
var canvas1=document.getElementById（“canvas1”）；
var ctx1=canvas1.getContext（“2d”）；
var canvas2=document.getElementById（“canvas2”）；
var ctx2=canvas2.getContext（“2d”）；
var-imageurl=[]；
var-imagesOK=0；
var imagesFailed=0；
var-imgs=[]；
imageURLs.push（“http://upload.wikimedia.org/wikipedia/commons/d/d4/New_York_City_at_night_HDR_edit1.jpg");
imageURLs.push（“http://www.freebestwallpapers.info/bulkupload//20082010//Places/future-city.jpg");
加载图像（）；
函数loadAllImages（）{
对于（var i=0；i

请在JDFIDLE中发布您的代码，然后只有我们可以帮助您。如果您在页面加载完成后调用draw canvas方法，它可能会起作用。为什么您需要4个上下文来表示2个画布元素？是的。这应该是问题所在。很好的例子非常感谢！这绝对是一个很好的展示图片的方式。

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

  var canvas1=document.getElementById("canvas1");
  var ctx1=canvas1.getContext("2d");
  var canvas2=document.getElementById("canvas2");
  var ctx2=canvas2.getContext("2d");

  var imageURLs=[];
  var imagesOK=0;
  var imagesFailed=0;
  var imgs=[];
  imageURLs.push("http://upload.wikimedia.org/wikipedia/commons/d/d4/New_York_City_at_night_HDR_edit1.jpg");
  imageURLs.push("http://www.freebestwallpapers.info/bulkupload//20082010//Places/future-city.jpg");
  loadAllImages();

  function loadAllImages(){
      for (var i = 0; i < imageURLs.length; i++) {
        var img = new Image();
        imgs.push(img);
        img.onload = onLoad; 
        img.onerror = onFail;
        img.src = imageURLs[i];
      }      
  }

  var imagesAllLoaded = function() {
    if (imagesOK+imagesFailed==imageURLs.length ) {

       // ALL IMAGES ARE NOW PROCESSED
       // ready to use loaded images
       // ready to handle failed image loads

       ctx1.drawImage(imgs[0],0,0,canvas1.width,canvas1.height);
       ctx2.drawImage(imgs[1],0,0,canvas2.width,canvas2.height);

    }
  };

  function onLoad() {
    imagesOK++;
    imagesAllLoaded();
  }

  function onFail() {
    // possibly log which images failed to load
    imagesFailed++;
    imagesAllLoaded();
  };   


}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas1" width=300 height=300></canvas><br/>
    <canvas id="canvas2" width=300 height=300></canvas>
</body>
</html>