TypeError: Impossibile chiamare il metodo 'getContext' di null (funzione anonima)

Sono un principiante e non ho ancora fatto alcun JavaScript prima quindi spero che tu possa aiutarmi. Ho realizzato una tela che consente all'utente di scegliere una forma e un colore con pulsanti di opzione che vengono quindi disegnati sulla tela. Ho anche aggiunto una casella di controllo con l'opzione di aggiungere una sfumatura al colore scelto. Ecco il programma: http://people.dsv.su.se/~caak1743/Canvas/canvas.html TypeError: Impossibile chiamare il metodo 'getContext' di null (funzione anonima)

Ora non voglio fare in modo che le forme possano essere trascinate e rilasciate intorno all'area di disegno. E ho trovato un codice che penso possa essere modificata per lavorare sul mio programma, ma continuo a ricevere: TypeError: Non è possibile chiamare il metodo 'getContext' di null init (funzione anonima) per la linea:

 var ctx = canvas.getContext("2d");

e non ho idea di cosa sia sbagliato o di come posso risolverlo. Ho provato a cercare programmi simili con problemi simili ma non ho trovato nulla che posso applicare qui. Ecco il codice che sto cercando di incorporare con la mia:

function init() { 
    var canvas = document.getElementById("myCanvas"); 
    var ctx = canvas.getContext("2d"); 
    return setInterval(draw, 10); 
    } 

    function draw() { 
    clear(); 
    ctx.fillStyle = "#FAF7F8"; 
    rectangle(0,0,WIDTH,HEIGHT); 
    ctx.fillStyle = "#444444"; 
    rectangle(); 
    } 

    function myMove(e){ 
    if (dragok){ 
    x = e.pageX - canvas.offsetLeft; 
    y = e.pageY - canvas.offsetTop; 
    } 
    } 

    function myDown(e){ 
    if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 + 
    canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop && 
    e.pageY > y -15 + canvas.offsetTop){ 
    x = e.pageX - canvas.offsetLeft; 
    y = e.pageY - canvas.offsetTop; 
    dragok = true; 
    canvas.onmousemove = myMove; 
    } 
    } 

    function myUp(){ 
    dragok = false; 
    canvas.onmousemove = null; 
    } 

    init(); 
    canvas.onmousedown = myDown; 
    canvas.onmouseup = myUp;

fonte

2012-05-18 Fieldflower

Basta correggere al seguente:

<script type="text/javascript"> 
window.onLoad=function(){ init();}; 
    function init() { 
    var canvas = document.getElementById("myCanvas"); 
    var ctx = canvas.getContext("2d"); 
    return setInterval(draw, 10); 
    } 

    function draw() { 
    clear(); 
    ctx.fillStyle = "#FAF7F8"; 
    rectangle(0,0,WIDTH,HEIGHT); 
    ctx.fillStyle = "#444444"; 
    rectangle(); 
    } 

    function myMove(e) { 
    if (dragok) { 
     x = e.pageX - canvas.offsetLeft; 
     y = e.pageY - canvas.offsetTop; 
    } 
    } 

    function myDown(e) { 
    if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 + 
     canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop && 
     e.pageY > y -15 + canvas.offsetTop) { 
     x = e.pageX - canvas.offsetLeft; 
     y = e.pageY - canvas.offsetTop; 
     dragok = true; 
     canvas.onmousemove = myMove; 
    } 
    } 

    function myUp() { 
    dragok = false; 
    canvas.onmousemove = null; 
    } 

    init(); 
    canvas.onmousedown = myDown; 
    canvas.onmouseup = myUp; 
</script>

Questo dovrebbe funzionare. Il problema è che l'elemento canvas deve essere pronto per eseguire lo script. Poiché la sezione <script> nella sezione <head> viene eseguita prima del caricamento dello <canvas>, viene visualizzato l'errore.

fonte

2012-07-15 13:18:43 Avinash

Ciao Mr @ meetar posso usare canvas in React nativo – Lavaraju

Ho trovato due soluzioni. Il primo è aggiungere jquery alla tua pagina e quindi non è necessario usare js in-html avvolgendo l'intero codice js in

$(document).ready(function() { Your code here });

ciò che rende il codice eseguito dopo che html è pronto, o semplicemente scambiando testa e corpo, dove non è necessario usare in-html js (esegue l'html prima di js). Questi dovrebbero funzionare.

fonte

2013-12-21 12:23:54 blesius

Assicurarsi che lo script è DOPO vostro elemento tela.

fonte

2014-02-28 10:17:23

Devi solo fare quello per eliminare l'errore. Basta aggiungere la tela prima dello script e posizionare sempre lo script alla fine.

<body> 
<canvas id="ca"></canvas> 

<script type="text/javascript"> 

    var ca = document.getElementById("ca"); 
    var co = ca.getContext("2d"); 

// whatever your code  
</script> 
</body>

fonte

2014-03-03 07:54:23 rohit

TypeError: Impossibile chiamare il metodo 'getContext' di null (funzione anonima)

risposta

Problemi correlati