2020-06-28-Canvas笔记04-绘制圆弧

arc()函数

arc() 有6个参数

x 圆心坐标x
y 圆心坐标y
radius 半径
startAngle 起始弧度
endAngle 终止弧度
anticlockwise 是否逆时针方向绘制（默认false表示顺时针；true表示逆时针）

实例画一个圆

圆心是画布的中心点，半径为100，一个正圆的起始弧度为0，终止弧度为2π

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

context.beginPath();
context.arc(canvas.width/2, canvas.height/2, 100, 0, Math.PI * 2, true);
context.stroke();

效果如图：

画圆.png

context.beginPath();
context.arc(canvas.width/2, canvas.height/2, 80, Math.PI/4, Math.PI * 2, true);
context.stroke();

context.strokeStyle = 'red';
context.beginPath();
context.arc(canvas.width/2, canvas.height/2, 80, Math.PI/4, Math.PI * 2, false);
context.stroke();

画一段弧线.png