一张画布上的多种图案答案

【问题标题】：Multi Patterns on one Canvas一张画布上的多种图案
【发布时间】：2014-05-18 18:44:33
【问题描述】：

我想在一张画布上绘制多个图案。我可以使用回调函数加载多个图像，但是当我尝试绘制图案时，什么也没有发生。假设墙壁的图案和屋顶的图案出现在同一张画布上。但是在我的浏览器（mozilla）中打开html，只打开一个空白页。

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <title> EXAMPLE </title>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>


    <script type="text/javascript" src="./jquery.js"></script>
    <script type="text/javascript">

    $.getJSON("example01.json", function(data) {

      var canvas = document.getElementById("myCanvas");
      var ctx = canvas.getContext("2d");
      canvas.width = data.map.width;
      canvas.height = data.map.height;

      var count = 0;
      for (property in data.map) {
        count++;
      }

      var sources = new Array(count - 2);
      var wallExist = data.map.wall.brick;
      var roofExist = data.map.roof.tile;

      if (typeof (wallExist) != "undefined") {
        switch (data.map.wall.brick) {
          case "01":
            sources[0] = "./brick01.png";
            break;

          case "02":
            sources[0] = "./brick02.png";
            break;
        }
      }


      if (typeof (roofExist) != "undefined") {
        switch (roofExist) {
          case "01" :
            sources[1] = "./roof01.png";

          case "02" :
            sources[1] = "./roof02.png";
        }

        function loadImages(sources, callback) {
          var images = new Array();
          var loadedImages = 0;
          var numImages = 0;
          var patterns = new Array();

          for (var src in sources) {
            numImages++;
          }

          for (i = 0; i <= sources.length; i++) {
            images[i] = new Image();
            images[i].onload = function() {
              if (++loadedImages >= numImages) {
                callback(images);
              }
            };
            images[i].src = sources[i];
            patterns[i] = ctx.createPattern(image[i], "repeat");
          }
        }

        loadImages(sources, function(images) {
          ctx.rect(data.map.wall.x_pos, data.map.wall.y_pos, data.map.wall.width, data.map.wall.height);
          ctx.fill(pattern[0]);
          ctx.rect(data.map.roof.x_pos, data.map.roof.y_pos, data.map.roof.width, dat.map.roof.height);
          ctx.fill(pattern[1]);
        });
      }
    });

【问题讨论】：

好吧，您已经在 尚未加载的图像上执行ctx.createPattern。把它放在回调中。

标签： javascript html image canvas

【解决方案1】：

问题似乎是您正在执行patterns[i] = ctx.createPattern(image[i], "repeat");，而相应的图像尚未加载。

此外，在loadImages 回调中，您正在访问一个不存在的pattern 数组（并且patterns 超出范围）。而fill()没有把pattern作为参数，但是需要在之前设置上下文的.fillStyle属性。

最后但同样重要的是，您已将 loadImages 函数声明及其调用放在 if (roofExist) 子句中，它应该在它之后。

为了好玩，我还重写了你的逻辑，不使用所有这些数组或对象，因为它们似乎有点不必要，因为你只是有条件地填充它们。

function draw(ctx, item, prop, imgname) {
  if (!item || !item[prop]) return; // abort, doesn't exist

  var image = new Image();
  image.onload = function() {
    ctx.fillStyle = ctx.createPattern(image, "repeat");
    ctx.rect(item.x_pos, item.y_pos, item.width, item.height);
    ctx.fill();
  };
  image.src = imgname+item[prop]+".png";
}
$.getJSON("example01.json", function(data) {
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  canvas.width = data.map.width;
  canvas.height = data.map.height;

  draw(ctx, data.map.wall, "brick", "./brick");
  draw(cty, data.map.roof, "tile", "./roof");
});

【讨论】：