使用canvas drawImage将img分成两半

Question

我正试图在画布上分割图像.

首先,我在HTML中声明画布:

<canvas width="600" height="400" id="canvas_1">
        Canvas tag not supported
</canvas>

然后我不成功地分割了我的形象:

var canvas = document.getElementById("canvas_1");

if (canvas.getContext){
   var canvas_context = canvas.getContext("2d");
   var img = document.getElementById("london_eye");
   canvas_context.drawImage(img, 0, 0, 230, 300, 20, 20, 80, 300);
   canvas_context.drawImage(img, 30, 0, 180, 300, 200, 20, 80, 300);
}

我想我错过了一些东西..

canvas_context.drawImage(img, 0, 0, 230, 300, 20, 20, 80, 300);
canvas_context.drawImage(img, 30, 0, 180, 300, 200, 20, 80, 300);

FIDDLE
感谢您的时间和建议

Answer 1

原始代码

var canvas = document.getElementById("canvas_1");

if (canvas.getContext){
  var canvas_context = canvas.getContext("2d");
  var img = document.getElementById("london_eye");
  canvas_context.drawImage(img, 0, 0, 60, 120, 0, 0, 60, 120);
  canvas_context.drawImage(img, 60, 0, 60, 120, 70, 0, 60, 120);
}

最后四个参数是destX,destY,destWidth,destHeight.所以这就是你要在画布上放置这些碎片的地方,你可以看到第二块是70,所以它的第一块60的宽度加上10的间隙.

我把10px的差距显示在你的片段中你的两个img!

var i = new Image();
i.crossOrigin = '';
i.onload = function() {
  var canvas = document.getElementById("canvas_1");
    
    if (canvas.getContext){
      var canvas_context = canvas.getContext("2d");
      canvas_context.drawImage(i, 0, 0, 60, 120, 0, 0, 60, 120);
      canvas_context.drawImage(i, 60, 0, 60, 120, 70, 0, 60, 120);
    }
};
i.onerror = function() {
    i.src = 'http://cors.io?u=' + i.src;
    i.onerror = function() {
        document.write('Error loading image');
    }
};
i.src = 'https://i.stack.imgur.com/olfBw.png';

<canvas id="canvas_1"></canvas>