Canvas zeichnet in einer Umgebung, nicht in der anderen

Ich versuche, ein Eingabeformular zu erstellen, das Informationen verwendet, um eine einfache Form mit Zeichenfläche zu zeichnen.Canvas zeichnet in einer Umgebung, nicht in der anderen

Ich hatte es in der Codecademy Testumgebung arbeiten, aber ich konnte nicht herausfinden, wie die Konsole zu bringen, also versuchte ich, es zu codepen.io zu migrieren, so dass ich einige Ausgaben für die Fehlerbehebung bei Bedarf erhalten konnte. Nach dem Kopieren zeichnet es nicht mehr die Form. Gibt es etwas, das mir fehlt?

Hier ist das Skript, das ich verwende. Ich habe versucht, es Zeile für Zeile zu kommentieren, aber ohne Erfolg. Ich habe auch versucht, jsfiddle mit dem gleichen Ergebnis zu verwenden.

$(document).ready(function(){ 
    //Initialize canvas 
    var canvas = document.getElementById('canvas'); 
    var context = canvas.getContext('2d'); 

    //Draw settings 

    //draw circle! 
    function draw() { 
     var x = document.getElementById('x').value 
     console.log(x) 
     var y = document.getElementById('y').value 
     var radius = document.getElementById('radius').value 
     context.clearRect(0, 0, canvas.width, canvas.height); 
     context.beginPath(); 
     context.arc(x, y, 40, 0, Math.PI); 
     context.stroke(); 
    } 

    setInterval(draw, 10); 
});

http://codepen.io/whole_kernel/pen/XKRZVV

Quelle

2016-07-01 fudge

Sein wegen jquery. Sie versuchen, Funktionen zu verwenden, die jQuery definiert wurden. Fügen Sie diese in den Kopf:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Quelle

2016-07-01 03:12:09

Fügen Sie dieses Skript-Tag am Ende Ihrer HTML-Seite direkt vor dem ''-Tag hinzu, um es ihrem Kommentar hinzuzufügen. Ihre Methode erfordert eine Internetverbindung, also sollten Sie in Erwägung ziehen, die Datei herunterzuladen und lokal in einem js-Ordner in Ihrem Projektverzeichnis zu speichern und dann '' – btrballin

Danke! Der Übergang von diesen Lernumgebungen hat mich zum Stolpern gebracht. Es gibt ein bisschen Standard, das in diesen Tutorials für mich festgelegt wurde und wenn es plötzlich nicht da ist, hat es etwas Verwirrung verursacht. – fudge

Die andere Antwort deutet darauf hin, dass Sie jQuery verwenden, indem Sie in dieser Datei verknüpfen.

Anstatt die jQuery ersetzen

$(document).ready(function(....

mit

window.addEventListener("load",function(....

Es macht das gleiche, und Ihre Seite wird geladen und schneller laufen. Warum laden Sie eine ganze Schnittstelle für nur eine Codezeile.

Quelle

2016-07-01 04:09:25 Blindman67

Canvas zeichnet in einer Umgebung, nicht in der anderen

Antwort

Verwandte Themen