Uncaught TypeError：nullのプロパティ 'onclick'を設定できません。試したwindow.onload

Question

私は比較的新しいJavascripです。私がしたいのは、私のキャンバス上に動くイメージを与えることですが、私は最終的にクリック可能なイメージとしてイメージを使うことができるので、ユーザーを別のページにリダイレクトすることができます。画像がクリックされます。ここまでは私のコードです。私は助けが必要です。それ以上の説明が必要な場合は、さらに説明しようとします。

 var ctx; 
     var imgBg; 
     var imgDrops; 
     var x = 0; 
     var y = 0; 
     var noOfDrops = 50; 
     var fallingDrops = []; 
      function drawBackground(){ 
    ctx.drawImage(imgBg, 0, 0); //Background 
      } 
      function draw() { 
    drawBackground(); 

    for (var i=0; i< noOfDrops; i++) 
    { 
    ctx.drawImage (fallingDrops[i].image, fallingDrops[i].x, fallingDrops[i].y); //The rain drop 

    fallingDrops[i].y += fallingDrops[i].speed; //Set the falling speed 
    if (fallingDrops[i].y > 1000) { //Repeat the raindrop when it falls out of view 
    fallingDrops[i].y = -25 //Account for the image size 
    fallingDrops[i].x = Math.random() * 10000; //Make it appear randomly along the width 
       } 

       } 
      } 
      function setup() { 
    var canvas = document.getElementById('canvasRegn'); 

    if (canvas.getContext) { 
      ctx = canvas.getContext('2d'); 

       imgBg = new Image(); 
     imgBg.src = "http://images.susu.org/unionfilms/films/backgrounds/hd/space-jam.jpg"; 
    setInterval(draw, 36); 
    for (var i = 0; i < noOfDrops; i++) { 
     // Charles Barkley 
     var fallingDr = new Object(); 
     fallingDr["image"] = new Image(); 
     fallingDr.image.src = 'http://xenboards.ignimgs.com/external_data/attachments/8/8795-f09b907a01726a25ca2fbd2f588e3f0e.jpg'; 
     fallingDr["x"] = Math.random() * 10000; 
     fallingDr["y"] = Math.random() * 5; 
     fallingDr["speed"] = 3 + Math.random() * 5; 
     fallingDrops.push(fallingDr); 
     // Bugs bunny 
     var fallingDr2 = new Object(); 
     fallingDr2["image"] = new Image(); 
     fallingDr2.image.src = 'http://i.imgur.com/zN2CSAf.png' 
     fallingDr2["x"] = Math.random() * 10000; 
     fallingDr2["y"] = Math.random() * 5; 
     fallingDr2["speed"] = 3 + Math.random() * 5; 
     fallingDrops.push(fallingDr2); 
     // Michael Jordan 
     var fallingDr3 = new Object(); 
     fallingDr3["image"] = new Image(); 
     fallingDr3.image.src = 'http://i.imgur.com/XxvJiGg.png' 
     fallingDr3["x"] = Math.random() * 10000; 
     fallingDr3["y"] = Math.random() * 5; 
     fallingDr3["speed"] = 3 + Math.random() * 5; 
     fallingDrops.push(fallingDr3); 
     // Daffy duck 
     var fallingDr4 = new Object(); 
     fallingDr4["image"] = new Image(); 
     fallingDr4.image.src = 'http://i.imgur.com/QZogw2L.png' 
     fallingDr4["x"] = Math.random() * 10000; 
     fallingDr4["y"] = Math.random() * 5; 
     fallingDr4["speed"] = 3 + Math.random() * 5; 
     fallingDrops.push(fallingDr4); 
     fallingDr4.image.id = "Daffy"; 
     } 
    } 
      } 
     setup(); 
     window.onload = function(){ 
      document.getElementById("Daffy").onclick=function(){ 
     alert("Hello World"); 
     } 
     } 

Answer 1

試してみてください。

fallingDr4.image.onclick=function(){ 
     alert(this.id); 
     } 

は "ダフィー" を警告する必要があります。

Answer 2

あなたの問題は、が文書にないため、ユーザーがクリックできない要素でクリックイベントをキャッチしようとしていることです。

var img = new Image()と電話をすると、新しい<img>要素が作成され、そのプロパティはすべてJavaScriptで既に変更可能です。ただし、この要素はスクリプトでのみ使用でき、document.anyElement.appendChild(img)に電話するまでページには表示されません。だから、たとえそれが実際に存在していても、これを要素以上のimageObjectとして考える方が良いでしょう。

文書に記載され、ユーザーがアクセスできるものは、<canvas>要素です。したがって、ユーザーがクリックしたかどうかを知りたい場合は、eventListenerをこのcanvasElementに添付する必要があります。

しかしcanvasElementは、それが何を表しているのかわかりません。 context.drawImage()を呼び出すと、imageSourceのピクセルをキャンバスのピクセルに適用するだけで、元のimageObjectへの参照はすべて失われます。
これを回避するには、描画された画像の位置をキャンバスに保存し、取得したクリックイベントがこれらの位置にあるかどうかを確認する必要があります。 クリックイベントのclientXとclientYあなたの引数として渡されたイベントのプロパティは、イベントが発生したときのカーソルの位置を示します。しかし、位置はウィンドウの左上隅に相対的です。キャンバスの左上隅を基準にしてこれを設定する必要があります。これはcanvasElementのgetBoundingClientRect()メソッドを呼び出すことで行うことができます。あなたが設定しようとしている

// this function will be called at image's load 
 
var init = function() { 
 
    // a reference to our "in-screen" canvasElement 
 
    var canvas = document.getElementById('canvas'); 
 
    var ctx = canvas.getContext('2d'); 
 
    // "kitty" will be the js object that will help us know if we clicked on our image 
 
    // "this" refers to the imageObject 
 
    var kitty = { 
 
     width: this.width, 
 
     height: this.height, 
 
     // random positions 
 
     left: Math.random() * (canvas.width - this.width), 
 
     top: Math.random() * (canvas.height - this.height), 
 
    }; 
 
    // draw our image at the random positions we created 
 
    ctx.drawImage(this, kitty.left, kitty.top, kitty.width, kitty.height); 
 
    // here we're listening to mousemove event, 
 
    // but click event shares the same clientX & clientY properties 
 
    var moveHandler = function(evt) { 
 
     // in the "evt" object passed, we can get the x and y positions relative to the window 
 
     // so we make these relatives to the canvas ones 
 
     var canvasRect = canvas.getBoundingClientRect(); 
 
     var x = evt.clientX - canvasRect.left; 
 
     var y = evt.clientY - canvasRect.top; 
 

 
     // now we've got our relative positions, we can check if we were inside the image 
 
     if (x >= kitty.left && x <= (kitty.left + kitty.width) && y >= kitty.top && y <= (kitty.top + kitty.height)) { 
 
      // we are over the image, do something 
 
      canvas.style.cursor = 'pointer'; 
 
      document.body.style.backgroundColor = 'lightblue'; 
 
     } else { 
 
      canvas.style.cursor = 'default'; 
 
      document.body.style.backgroundColor = 'transparent'; 
 
     } 
 
     }; 
 
     // attach this event handler to the canvasElement 
 
     canvas.addEventListener('mousemove', moveHandler); 
 
    }; 
 

 
// this will create an imageObject, which will stay "off-screen" (never appendded to the document) 
 
var img = new Image(); 
 
// wait that the image has loaded before trying to make any magic 
 
img.onload = init; 
 

 
img.src = "http://lorempixel.com/200/70/cats";

body { 
 
    width: 100vw; 
 
    text-align: center; 
 
} 
 
canvas { 
 
    margin: 0 auto; 
 
    position: relative; 
 
}

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

（あなたが実際に画像を見にスクロールする必要がある、またはフルスクリーン行く場合があります）