キャンバスは1つの環境内で描画します。

Question

キャンバスを使用して単純な図形をプロットするために情報を使用する入力フォームを作成しようとしています。

私はcodecademyテスト環境で作業していましたが、コンソールを起動する方法を理解できなかったため、codepen.ioに移行して、必要なときにトラブルシューティングのための出力を得ることができました。 これをコピーすると、シェイプを描画しなくなります。私は行方不明のものがありますか？

ここに私が使用しているスクリプトがあります。私はそれを行ごとにコメントアウトしようとしましたが、無駄です。私は同じ結果でjsfiddleを使ってみました。

$(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

Answer 1

ためのjQueryのその。あなたはjqueryで定義された関数を使用しようとしています。頭の中でこれを追加 ：

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

Answer 2

他の答えはあなたがそのファイルにリンクしてjQueryのを使用することを示唆しています。

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

それは同じことをして、あなたのページをロードし、迅速に実行されますと

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

を置き換えるのjQueryを使用するのではなく。 1行分のコードでインターフェイス全体を読み込むのはなぜですか？