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

你可能感兴趣的:(2020-06-28-Canvas笔记04-绘制圆弧)