Javascript: Canvas Drawing (2 identische Dateien mit unterschiedlichen Ergebnissen)

Question

Also, ich gehe gerade durch mein Javascript-Buch und es gab ein kleines Beispiel für Leinwandzeichnung. Ich habe den Code aus dem Buch kopiert, aber die Leinwand bleibt weiß.

Ich fuhr dann fort, die Sammlung des Autors aller im Buch gezeigten Skripte herunterzuladen und mit seinem Code funktioniert es überraschend.

Für mich sehen beide Codes identisch aus, das einzige, was sich unterscheidet ist, dass ich "" für Strings verwenden, während der Autor verwendet "".

Dies ist mein Code:

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); 

Und dies ist der Code des Autors:

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

Sie haben ein kleines Problem in der handleMouseMove Funktion. Sie schreiben

y = e.ClientY; 

Aber e.ClientY nicht existiert, sollte es sein:

y = e.clientY;