は、このチュートリアル以下、プリロードキャンバス画像要素が

Question

を選択したときに、私はいくつかの画像をプリロードし、キャンバスでそれらを描くことができますを表示：

http://www.html5canvastutorials.com/tutorials/html5-canvas-image-loader/

私は、デフォルトではキャンバスのベース画像を表示したいですユーザーが特定のリストアイテムをクリックしたときにのみ、他のイメージを描画することができます。ここに私のコードは次のとおりです。

https://jsfiddle.net/xz1x8jkr/

document.querySelector("highlight_1").addEventListener("click", function() { 
    ctx.drawImage(images.arrow45, 177, 464, 32, 32); 
}); 

私はこのビットが働いて得ることができないと、実際にいくつかのアドバイスをいただければ幸いです。ありがとう！私はこれでさらに得ているが、再び立ち往生していモニカOlejniczakへ

感謝を質問へ

UPDATE。私はここで

をgetElementByIdを（）を使用し、「canvasBase」のIDでウェブページ上の画像のソースURLをターゲットによって「ベース」の値に引くしたい情報源アレイでは

である私更新フィドル：

https://jsfiddle.net/xz1x8jkr/21/

が（のようなもの）は、この

を行うことができますか？

Answer 1

セレクタが存在しないタグ<highlight_1>を参照しているため、クリックハンドラが起動していません。代わりに<li class="highlight_1">のクラスを指定するには、.highlight_1にする必要があります。

このコードスニペットが期待通りに機能しない別の理由は、変数imagesを参照しようとしているためです。ただし、この変数はコールバックでのみ宣言され、以下に示すようにソースイメージをロードします。それはloadImagesコールバックで指定された宣言を参照すると、あなたがimagesにアクセスすることができます

loadImages(sources, function(images) { 
    ctx.drawImage(images.base, 0, 0, 685, 525); 
    document.querySelector(".highlight_1").addEventListener("click", function() { 
     ctx.drawImage(images.arrow45, 177, 464, 32, 32); 
    }); 
}); 

この方法：

loadImages(sources, function(images) { 
    // Reference to images is available in this function, and any nested functions. 
    ctx.drawImage(images.base, 0, 0, 685, 525); 
}); 

// Images reference no longer available here 

document.querySelector("highlight_1").addEventListener("click", function() { 
    // Images reference is also no longer available here 
    ctx.drawImage(images.arrow45, 177, 464, 32, 32); 
}); 

代わりに、次のようなものを持っている必要があります。