画布仅在多次调用和刷新后才能工作

Question

我正在使用 html5 画布，但它无法正常工作

<section class="row" style="margin: 0px auto;">
  <canvas id="a" width=1000 height=350></canvas>
  <canvas id="b" width=1000 height=350></canvas>
  <canvas id="c" width=1000 height=350></canvas>
  <canvas id="d" width=1000 height=350></canvas>
  <canvas id="e" width=1000 height=350></canvas>
  <canvas id="f" width=1000 height=350></canvas>
  <canvas id="g" width=1000 height=350></canvas>
  <canvas id="h" width=1000 height=350></canvas>
  <canvas id="i" width=1000 height=350></canvas>
<img src="original.png" class="ogimg" id="ogimg"/> 
<img src="shadow.png" class="high" id="high"/> 
<img src="bulldozer-mocha.png" name="bulldozer-mocha.png" onclick="drw(this)">
<img src="bulldozer.png" name="bulldozer.png" onclick="drw_cushion(this)">
<img src="mocha.png" name="mocha.png" onclick="drw_cushions(this)">
</section>

完整代码在这里jsfiddle

代码可以正常工作，但需要 2 或 3 次页面刷新

请帮我找出错误

https://jsfiddle.net/jbedrzxo/

Answer 1

这里有一些代码可以帮助您入门：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var c = document.createElement("canvas");
var cctx = c.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;

// Image Loader: put the paths to your images in imageURLs[]
var imageURLs = [];
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/sofa.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/texture1.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/texture2.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/texture3.png");
var imgs = [];
var imagesOK = 0;
preloadAllImages(start);

var sofaParts = [];
var sofa = {
  x: 0,
  y: 0,
  img: null,
  textureIndex: 0,
}
sofaParts.push(sofa);

var texturePatterns = [];

function preloadAllImages(callback) {
  for (var i = 0; i < imageURLs.length; i++) {
    var img = new Image();
    imgs.push(img);
    img.onload = function() {
      imagesOK++;
      if (imagesOK >= imageURLs.length) {
        callback();
      }
    };
    img.onerror = function() {
      alert("image load failed");
    }
    img.src = imageURLs[i];
  }
}

function start() {
  sofa.img = imgs[0];
  for (var i = 1; i < imgs.length; i++) {
    texturePatterns.push(cctx.createPattern(imgs[i], 'repeat'))
  }
  draw();
}

function draw() {
  ctx.clearRect(0, 0, cw, ch);
  for (var i = 0; i < sofaParts.length; i++) {
    var s = sofaParts[i];
    ctx.drawImage(s.img, s.x, s.y);
    applyTexture(s.img, s.textureIndex);
    ctx.globalAlpha = 0.20;
    ctx.drawImage(c, s.x, s.y);
    ctx.globalAlpha = .15;
    ctx.drawImage(s.img, s.x, s.y);
    ctx.globalAlpha = 1.00;
  }
}

function applyTexture(img, textureIndex) {
  c.width = img.width;
  c.height = img.height;
  cctx.drawImage(img, 0, 0);
  cctx.globalCompositeOperation = 'source-atop';
  cctx.fillStyle = texturePatterns[textureIndex];
  cctx.fillRect(0, 0, img.width, img.height);
  cctx.globalCompositeOperation = 'source-over';
}

$('.textures').click(function(e) {
  sofaParts[0].textureIndex = $(this).data('tindex');
  draw();
});

#canvas {
  border: 1px solid red;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<canvas id="canvas" width=300 height=200></canvas>
<h4>Click on a texture for the sofa.</h4>
<img class='textures' data-tindex=0 src='https://dl.dropboxusercontent.com/u/139992952/multple/texture1.png'>
<img class='textures' data-tindex=1 src='https://dl.dropboxusercontent.com/u/139992952/multple/texture2.png'>
<img class='textures' data-tindex=2 src='https://dl.dropboxusercontent.com/u/139992952/multple/texture3.png'>