使圖像在點擊時開始出現在畫布上

Question

基本上我有我的代碼工作，因爲當頁面加載圖像開始在畫布上一個接一個地顯示時，但是我希望圖像開始顯示鼠標點擊，你能告訴我如何做到這一點？

<script> 

window.onload = function() { 



var canvas=document.getElementById("myCanvas").addEventListener("mousedown", function() // Selects the canvas element 
var context=canvas.getContext("2d"); 

var img1 =new Image() //creates a variable for a new image 
var img2 =new Image() //creates a variable for a new image 
var img3 =new Image() //creates a variable for a new image 
var img4 =new Image() //creates a variable for a new image 

img1.src = "canvasimg1.png" // Gets image 
img2.src = "canvasimg2.png" // Gets image 
img3.src = "canvasimg3.png" // Gets image 
img4.src = "canvasimg4.png" // Gets image 

setTimeout(           // Settimeout - execute the passed function after the amount of milliseconds 
    function() { context.drawImage(img1,23,20); }  // Function to be executed 
, 1000);            // Amount of milliseconds to delay for 

setTimeout(           // Settimeout - execute the passed function after the amount of milliseconds 
    function() { context.drawImage(img2, 23, 60); }  // Function to be executed 
, 6000);            // Amount of milliseconds to delay for 

setTimeout(           // Settimeout - execute the passed function after the amount of milliseconds 
    function() { context.drawImage(img3, 25, 120); } // Function to be executed 
, 11000);            // Amount of milliseconds to delay for 

setTimeout(           // Settimeout - execute the passed function after the amount of milliseconds 
    function() { context.drawImage(img4, 150, 180); } // Function to be executed 
, 16000);            // Amount of milliseconds to delay for 
} 

</script> 

Answer 1

如果您需要的圖像開始顯示了點擊畫布上時，你把四個setTimeout的功能在另一個函數，你調用這個函數只有當畫布上點擊！

<canvas id="exemple" width="200" height="200" onclick="showImage()"> 


function showImage(){ 
    setTimout..... 
    .... 
    }