Question

我正在尝试制作一个圆弧，使其有2条直线，两条直线连接在一起，使用2个圆弧（分别连接线的顶部和底部）

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();

HTML5画布 - fillStyle不起作用

1 个答案: