ハードコーディングされていないパラメータを使用しているときに、HTML 5キャンバスでレンダリングされないシェイプ

Question

typescriptを使用して基本的なHTML 5ゲームを作成しようとしていますが、ハードコードされていないサイズの円をレンダリングするのに問題があります。

これまでの私のコード：

Circle.ts

import { IDrawable } from './../Interfaces/IDrawable'; 
import {BaseShape} from "./BaseShape"; 
export class Circle extends BaseShape implements IDrawable{ 

private _radius : number; 

public get radius(){ 
    return this._radius; 
} 

public set radius(val : number){ 
    this._radius = val; 
} 

constructor(context : CanvasRenderingContext2D,radius : number, x : number, y : number, color : string = "red", lineWidth : number = 2) { 
    super(context , x, y, color, lineWidth); 

} 

public draw =() : void => { 

    this.context.save(); 
    this.context.beginPath(); 
    this.context.strokeStyle = this.color; 
    this.context.lineWidth = this.lineWidth; 
    this.context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI); 
    this.context.stroke();  
    this.context.restore(); 

} 

}

Game.ts

import { Circle } from './Shapes/Circle'; 


export default class Game{ 
    private circle : Circle; 

    constructor(private ctx : CanvasRenderingContext2D){ 
     this.circle = new Circle(ctx, 200, 300, 50, "blue", 5); 
    } 

    public Start() : void{ 
     requestAnimationFrame(() => this.Start()); 

     this.ctx.fillStyle = "black"; 
     this.ctx.fillRect(0, 0, 1280, 720); 
     this.circle.draw(); 
} 

}

背景が細かいレンダリングが、私は行を変更しない限り、円はまったく表示されません。

this.context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI); 

とハードコードパラメータを。

draw()の矢印機能を使用し、通常の方法を使用して試してみましたが、同じ結果を持つdraw()のメソッドパラメータとしてコンテキストを提供しようとしました。

Answer 1

問題は、サークルのコンストラクタに間違った引数を渡していることです。コンストラクターのSeパラメーターと渡す値。

context: CanvasRenderingContext2D ctx 
radius: number      200 
x: number       300 
y: number       50 
color: string      "blue" 
lineWidth: number     5 

半径と座標のパラメータの順序を変更したと思います。