使用帆布drawImage将img分割成两半-UsecanvasdrawImagetoseparateimgintotwohalves

I'm trying to split image in my canvas.

First I'm declaring canvas in HTML:

我想在画布上分割图像。首先，我用HTML声明canvas:

        Canvas tag not supported

Then I'm unsuccesfully spliting my image:

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

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);
}

I guess I'm missing something there..

我想我漏掉了一些东西。

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
Thank you for your time and advices

谢谢您的时间和建议

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);
}