javascript - FillStyle 查询还是其他什么？

Question

只是练习使用带有参数的构造函数，并且遇到了一个错误，我认为该错误源于 fillStyle 方法。

我的 Canvas 只是显示为空白，并且控制台上没有错误？

尝试构建 5 个不同的圆圈，每个圆圈都有自己特定的颜色。

我创建了一个 fiddle :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>