HTMLキャンバス：イメージがキャンバスに描画されないのはなぜですか？

Question

HTML：

<img src="http://lorempixel.com/100/100/"> 
<img src="http://lorempixel.com/100/100/"> 
<img src="http://lorempixel.com/100/100/"> 
<img src="http://lorempixel.com/100/100/"> 

<canvas id="canvas" width="0" height="0"></canvas> 

Javascriptを：

https://jsfiddle.net/083bapwz/29/

なぜキャンバスは見えないですか、私も、ないと思います：

var images = document.getElementsByTagName('img'); 
var canvas = document.getElementById('canvas'); 

for (var i = 0; i < images.length; i++) { 
    canvas.getContext('2d').drawImage(images[i], canvas.width, canvas.height); 
    canvas.height = canvas.height + images[i].height; 
    canvas.width = images[i].width; 

}ここで

はフィドルです描かれている？私はそれを最初から上に、次々と下から順に描きたがっています。

Answer 1

カップルのもの。

まず、キャンバスの幅/高さのディメンションを変更すると、既存のキャンバスの状態がすべてリセットされます。これはclearRectのハッキー（サポートされていない）形式です。

例えば次のコードでください：つまり

var images = document.getElementsByTagName('img'); 
 
var canvas = document.getElementById('canvas'); 
 
var canvas2 = document.getElementById('canvas2'); 
 
var canvas3 = document.getElementById('canvas3'); 
 

 
var ctx1 = canvas.getContext('2d'); 
 
var ctx2 = canvas2.getContext('2d'); 
 
var ctx3 = canvas3.getContext('2d'); 
 

 
// wont draw 
 
ctx1.moveTo(0, 0); 
 
ctx1.lineTo(100, 100); 
 
ctx1.stroke(); 
 
canvas.width = 300; 
 

 
// wont draw 
 
ctx2.moveTo(0, 0); 
 
ctx2.lineTo(50, 50); 
 
ctx2.stroke(); 
 
canvas2.height = 100; 
 

 
// will draw 
 
ctx3.moveTo(0, 0); 
 
ctx3.lineTo(100, 100); 
 
ctx3.stroke();

#canvas{border: 1px solid red;} 
 
#canvas2{border: 1px solid blue;} 
 
#canvas3{border: 1px solid green;}

<canvas id="canvas" width="200" height="200"></canvas> 
 
<canvas id="canvas2" width="200" height="200"></canvas> 
 
<canvas id="canvas3" width="200" height="200"></canvas>

を、最後の画像を描画するための唯一のものであろうので、キャンバスのサイズを変更しないでください。

第2に、画像にcanvas.widthとcanvas.heightの（x、y）位置を描画するように指示しています。これは、あなたがここに画像を描画されます意味：

あなたは（左上）画像描画のためのx/yの値を指定する必要があります。

これが役に立ちます。

---

EDIT：

解決策次demoのようになります。

var images = document.getElementsByTagName('img'); 
var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 
var imageArray = Array.from(images); 

// add all image heights together 
var canvasHeight = imageArray.reduce(function (acc, img) { 
    acc += img.height; 
    return acc; 
}, 0); 

// just use first image as the width for this example 
var canvasWidth = imageArray[0].width; 

// set all canvas state prior to draws 
canvas.height = canvasHeight; 
canvas.width = canvasWidth; 

var top = 0; 
for (var i = 0; i < imageArray.length; i++) { 
    var image = imageArray[i]; 

    // use x of 0 to draw on left most of canvas 
    canvas.getContext('2d').drawImage(image, 0, top); 
    top += image.height; 
}