0

基本的に、ページが読み込まれるとキャンバス上に画像が次々と表示されるようにコードを動作させましたが、マウスのクリックで画像が表示されるようにしたいのですが、その方法を教えてください。これ？

<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>
4

1 に答える 1

0

キャンバスをクリックしたときに画像が表示されるようにする必要がある場合は、4つのsetTimeout関数を別の関数に配置し、キャンバスをクリックしたときにのみこの関数を呼び出します。

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


function showImage(){
    setTimout.....
     ....
   }
于 2012-12-12T22:36:37.527 に答える