FillStyle查询或其他东西？

Question

只是练习使用具有参数的构造函数，并且遇到了我认为源于f​​illStyle方法的错误。

我的画布显示为空白，控制台上没有错误？

试图建立5个不同的圈子，每个圈子都有自己特定的颜色。

我创建了一个小提琴：https://jsfiddle.net/kvuf7dxb/;

代码的主要大宗：

var circle1; 
    var circle2; 
    var circle3; 
    var circle4; 
    var circle5; 


    function drawCircles() { 

     ctx.clearRect(0,0,w,h); 

     circle1 = new Circle(600,600,102,55); 
     circle2 = new Circle(600,600,40,10); 
     circle3 = new Circle(600,600,37,12); 
     circle4 = new Circle(600,600,280,34); 
     circle5 = new Circle(600,600,390,55); 


    } 

     function Circle(x, y, color,r) { 
      this.x = x; 
      this.y = y; 
      this.color = color; 
      this.r = r; 

      this.show = function() { 
       ctx.beginPath(); 
       ctx.moveTo(this.x,this.y); 
       ctx.fillStyle = this.color; 
       ctx.arc(this.x,this.y,this.r,0,Math.PI*2,true); 
       ctx.fill(); 
      }; 
     } 

我知道，所有的圈子会出现在相同的x和y位置。

Answer 1

有几个问题需要解决。这是一个工作版本。

var canvas = document.getElementById('stars'); 
 
var ctx = canvas.getContext('2d'); 
 
var w = window.innerWidth; 
 
var h = window.innerHeight; 
 
canvas.width = w; 
 
canvas.height = h; 
 

 
var circle1 = new Circle(20, 20, '66CC00', 55), 
 
    circle2 = new Circle(30, 30, 'FF0000', 10), 
 
    circle3 = new Circle(40, 40, '3333FF', 12), 
 
    circle4 = new Circle(50, 50, 'FFFF00', 34), 
 
    circle5 = new Circle(70, 70, 'FF9933', 55); 
 
    
 
drawCircles(); 
 

 
function drawCircles() { 
 
    ctx.clearRect(0, 0, w, h); 
 
    circle1.show(); 
 
    circle2.show(); 
 
    circle3.show(); 
 
    circle4.show(); 
 
    circle5.show(); 
 
    requestAnimationFrame(drawCircles); 
 
} 
 

 
function Circle(x, y, color, r) { 
 
    this.x = w * x/100; 
 
    this.y = h * y/100; 
 
    this.color = '#' + color; 
 
    this.r = r; 
 
    this.show = function() { 
 
     ctx.beginPath(); 
 
     ctx.fillStyle = this.color; 
 
     ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2); 
 
     ctx.fill(); 
 
    }; 
 
}

body { 
 
    background: black; 
 
    overflow: hidden; 
 
}

<canvas id="stars"></canvas>