Javascript Canvas + objects/functions

Question

私は自分自身にjavascriptを教えようとしているので、HTML5とキャンバスを使ってプロジェクトを行うことにしましたが、わからないコードのバグを見つけました。コンテキストを変数cとして宣言しますが、cを参照する関数やオブジェクト定義では、c.beginPath（）などは定義されていないものとして表示されます。しかし、もしそのような参照が関数の外で動作するならば。私はキャンバスのオンラインチュートリアルにかなり近づいています。私がやっていることと、チュートリアルが行っていることが私のコードを実行しないようにしていることの違いはわかりません。私のコードの大部分は下にあり、drawメソッドへの呼び出しは私に問題を与えているものです。どんな助けもありがとう！

var canvas = document.querySelector('canvas'); 
 

 
var w = window.innerWidth; 
 
var h = window.innerHeight 
 
canvas.width = w; 
 
canvas.height = h; 
 

 
var c = canvas.getContext('2d'); 
 

 
// circle object 
 
function Circle(x, y, dx, dy, r, color) { 
 
    this.x = x; 
 
    this.y = y; 
 
    this.dx = dx; 
 
    this.dy = dy; 
 
    this.r = r; 
 
    this.color = color; 
 

 
    this.draw = function() { 
 
    c.beginPath(); 
 
    c.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false); 
 
    c.strokeStyle = this.color; 
 
    c.stroke(); 
 
    c.fill(); 
 
    } 
 

 
    this.update = function() { 
 
    if (this.x + this.r > w || this.x - this.r < 0) { 
 
     this.dx = -this.dx; 
 
    } 
 
    if (this.y + this.r > h || this.y - this.r < 0) { 
 
     this.dy = -this.dy; 
 
    } 
 

 
    this.x += this.dx; 
 
    this.y += this.dy; 
 

 
    this.draw(); 
 
    } 
 
}

<canvas></canvas>

Answer 1

あなたは私はあなたが混乱していて信じてやっていないカップルの事があります。

あなたはCircleのクラスのような構造を持っています。私はこれがあなたのコードで与えられたものだと推測していますが、そのクラスのインスタンスをどこにも作成していません。

このクラスの新しい参照を作成し、そのクラスから新しいオブジェクトのメソッドを呼び出す必要があります。

私は自分のコードを使用してあなたのための謎を書きました。このような

何か：あなたはstrokeStyleを参照している

var j = new Circle(100, 100, 200, 200, 20, 'red'); 
j.draw(); 

https://jsfiddle.net/wu3dcyfm/