HTML5 canvas - fillStyle不适用于

Question

我试着做一个圆弧，让它有两条线，这两条线用两条弧连接在一起(分别连接线的顶部和底部)

https://jsfiddle.net/AnuragSinha/94d5gy6u/1/

    ctx = document.getElementById('canvas').getContext('2d');
    this.max = 100;
    this.min = 0;
    var start = 0;
    var end = 100;
    this.radius=100;
    ctx.beginPath();
    var startAngle = 3/8*2*Math.PI + ((3/4*2*Math.PI)/(this.max - this.min) * start);
    var endAngle = (3/8*2*Math.PI + ((3/4*2*Math.PI)/(this.max - this.min) * end));
    var r = this.radius;
    var x1 = r - (r-5)* Math.cos(Math.PI - startAngle);
    var y1 = r + (r-5)* Math.sin(Math.PI - startAngle);

    var x2 = r - (r - r/10)* Math.cos(Math.PI - startAngle);
    var y2 = r + (r - r/10)* Math.sin(Math.PI - startAngle);

    var x3 = r - (r-5)* Math.cos(Math.PI - endAngle+0.05);
    var y3 = r + (r-5)* Math.sin(Math.PI - endAngle+0.05);

    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);

    ctx.arc(this.radius, this.radius, this.radius-(this.radius/10), startAngle, endAngle-0.05);
    ctx.lineTo(x3, y3);

    ctx.arc(this.radius, this.radius, this.radius-(5), endAngle-0.05, startAngle, true);
    ctx.lineTo(x1, y1);
    ctx.lineWidth = 1;
    ctx.fillStyle = '#8ED6FF';
    ctx.fill;
    ctx.strokeStyle='#8ED6FF';
    ctx.stroke();
    ctx.closePath();

虽然画出来的是干净的，但是我不能填充这个形状里面的颜色。我发现几乎没有其他讨论调用beginPath()和closePath() API的线程，但这也没有帮助。有什么建议吗？

Answer 1

您需要执行fill方法

ctx.fill();