03-01曲线图形-圆形

曲线图形的分类

曲线图形一般分为 弧线 和 曲线 。
弧线是圆形的一部分，每一个点都有相同的曲率，而曲线不一定。
曲线包含弧线。

关于beginPath()和closePath()

这两个方法是配合使用的，beginPath是开始路径的意思，closePath是关闭路径的意思。

圆形的语法

cxt.arc(x, y, 半径, 开始角度, 结束角度, 方向anticlockwise)

参数说明

• x和y：圆心坐标
• 开始角度和结束角度
  • 以弧度为单位
  • 尽量这样写 120(度数) * Math.PI / 180
• anticlockwise：方向
  • false：顺时针绘画（默认）
  • true：逆时针绘画

描边圆的步骤

1. 开始路径
2. arc()画圆
3. 结束路径
4. 描边操作

半圆

cxt.beginPath()
cxt.arc(80, 80, 50, 0, 180 * Math.PI / 180, true) 
cxt.closePath()

// if 描边的半圆就这样写
cxt.strokeStyle = 'hotPink'
cxt.stroke()
// else 填充的半圆就这样写
cxt.fillStyle = 'hotPink'
cxt.fill()

效果图：

描边半圆

填充半圆

圆

cxt.beginPath()
cxt.arc(120, 80, 50, 0, 360 * Math.PI / 180, true) 
cxt.closePath()

// if 描边的圆就着这样写
cxt.strokeStyle = 'hotPink'
cxt.stroke()
// else 填充的圆就这样写
cxt.fillStyle = 'hotPink'
cxt.fill()

效果图：

描边圆

填充圆

有方向的圆

// 逆时针
cxt.beginPath()
cxt.arc(70, 70, 50, 0, -90 * Math.PI / 180, true) 
cxt.closePath()

// 顺时针
cxt.beginPath()
cxt.arc(70, 70, 50, 0, -90 * Math.PI / 180) 
cxt.closePath()

// if 描边的圆就着这样写
cxt.strokeStyle = 'hotPink'
cxt.stroke()
// else 填充的圆就这样写
cxt.fillStyle = 'hotPink'
cxt.fill()

效果图：

anticlockwise : false

true

描边顺时针圆

填充顺时针圆