Javascript：キャンバスドローイング（結果が異なる2つの同一ファイル）

Question

今、私はjavascriptの本を読んでいますが、キャンバスの描画の小さな例がありました。私は本からコードをコピーしましたが、キャンバスは白のままです。

私は本の中に掲載されているすべてのスクリプトの著者のコレクションをダウンロードし、彼のコードで驚いたことに動作します。

私には両方のコードが同じに見えますが、唯一違うのは、著者が使用している間に文字列に " "を使用することです。

これは私のコードです：

function init() { 
    let canvas = document.getElementById("canvas"); 
    canvas.addEventListener("mousemove", handleMouseMove, false); 
    let context = canvas.getContext("2d"); 
    let started = false; 

    function handleMouseMove(e) { 
     let x, y; 
     if (e.clientX || e.clientX == 0) { 
      x = e.clientX; 
      y = e.ClientY; 
     } 
     if (!started) { 
      context.beginPath(); 
      context.moveTo(x, y); 
      started = true; 
     } else { 
      context.lineTo(x, y); 
      context.stroke(); 
     } 
    } 

} 

document.addEventListener("DOMContentLoaded", init); 

そして、これは作者のコードです：

function init() { 
    let canvas = document.getElementById('canvas'); 
    canvas.addEventListener('mousemove', handleMouseMove, false); 
    let context = canvas.getContext('2d'); 
    let started = false; 
    function handleMouseMove(e) { 
     let x, y; 
     if (e.clientX 
      || e.clientX == 0) { 
      x = e.clientX; 
      y = e.clientY; 
     } 
     if (!started) { 
      context.beginPath(); 
      context.moveTo(x, y); 
      started = true; 
     } else { 
      context.lineTo(x, y); 
      context.stroke(); 
     } 
    } 

} 

document.addEventListener('DOMContentLoaded', init); 

Answer 1

あなたはhandleMouseMove機能に少し問題を抱えています。あなたは

y = e.ClientY; 

を書くしかし、それがあるべき、e.ClientY存在しません：

y = e.clientY;