H5W3
当前位置:H5W3 > 问答 > 正文

canvas 创建扇形路径,使用stroke可绘制出现,使用fill却填充不到。

代码如下:

var ctx = canvas.getContext('2d')
ctx.beginPath();
ctx.translate(100, 100);// 以(100,100)为圆心
ctx.arc(0, 0, 100, Math.PI * 30 / 180, Math.PI * 60 / 180, false);
// 画第一条线
ctx.save();
ctx.rotate(Math.PI * 30 / 180);
ctx.moveTo(0, 0);
ctx.lineTo(100, 0);
ctx.restore();
// 画第二条线
ctx.rotate(Math.PI * 60 / 180);
ctx.moveTo(0, 0);
ctx.lineTo(100, 0);
// ctx.fill();
ctx.stroke();

使用stroke时,绘制效果如下:
canvas 创建扇形路径,使用stroke可绘制出现,使用fill却填充不到。
使用fill时,填充效果如下:
canvas 创建扇形路径,使用stroke可绘制出现,使用fill却填充不到。
它只填充了一小块,为什么这样?fill填充的不是stroke包围起来的路径?

回答

canvas 不会自动闭合曲线,画完闭合区域之后需要调用 ctx.closePath() 把路径闭合。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d')
ctx.beginPath();
ctx.translate(100, 100);// 以(100,100)为圆心
ctx.arc(0, 0, 100, Math.PI * 30 / 180, Math.PI * 60 / 180, false);
ctx.arcTo(0, 0, 0, 0, Math.PI * 30 / 180)
ctx.fill();
ctx.stroke();

未经允许不得转载:H5W3 » canvas 创建扇形路径,使用stroke可绘制出现,使用fill却填充不到。

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址