2020-06-28-Canvas笔记04-绘制圆弧
2020-06-28 本文已影响0人
cherry_liulei
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
