Canvas 曲线图形之圆与半圆

前言

在 Canvas 中，基本图形包括直线图形 和曲线图形 ，之前的文章已经学习了直线图形，接下来我们就开启曲线图形的学习。在我们的工作中，经常在统计图中会看到有饼状图等这样的圆弧图形，当然绘制曲线图形那么我们要知道曲线图形的绘制往往会涉及到曲线与弧线，我们需要明天曲线与弧线的区别点：

弧线上的每个点都具有相同的曲率，那么曲率相同，自然就是圆的一部分，这有就是圆弧的由来。
曲线的概念就比较广泛了，他可以是直线，可以是线段，可以是弧线，甚至可以是折线。

因此，我们可以现有的知识点上得出一些结论：

曲线包含弧线；（ <math xmlns="http://www.w3.org/1998/Math/MathML"> 弧线 ∈ 曲线弧线 \in 曲线 </math>弧线∈曲线）
弧线也是每个点具有相同曲率的曲线；

我们先对更简单的圆弧展开绘制，但是要绘制圆弧，我们首先的先绘制圆吧？

绘制圆

我们来看一下绘制圆的方法：

scss 复制代码

ctx.arc(x,y,radius,startAngle,endAngle,counterclockwise)

x: 圆心 O 点横坐标；
y: 圆心 O 点纵坐标；
radius: 半径 r；
startAngle: 绘制开始角度(弧度制，即 角度 * Math.PI / 180)；
endAngle: 绘制开始角度(弧度制，即 角度 * Math.PI / 180)；
counterclockwise: 布尔值，默认为 false，绘制方向顺时针，反之为逆时针方向；

描边圆

还记的描边的语法吗？ctx.stroke() 方法；

js 复制代码

<template>
  <canvas ref="cnv" width="200" height="150" style="border: 1px dashed gray"></canvas>
</template>

<script setup>
import {ref, onMounted} from "vue";
const cnv = ref();

const drawStrokeCircular = () => {
  const ctx = cnv.value.getContext('2d');

  ctx.beginPath();
  ctx.arc(100, 80, 60, 0, 360 * Math.PI / 180, false);
  ctx.closePath();

  ctx.strokeStyle = "hotpink";
  ctx.stroke();
}

onMounted(() => {
  drawStrokeCircular();
});
</script>

这里我们再次用到了 beginPath 与 closePath 方法，表示开始一段路径，闭合一段路径，圆形的绘制需要这两个方法的配合才能完成。我们重点来看一下 arc 方法中第5个参数 360 * Math.PI / 180，圆我们从 0° 开始绘画，再回到原来的起画点，角度也应该是 0° ？感兴趣的 jym 可以试试，这样绘画出来其实什么都没有，我们都知道一周的角度是 360°，所以要想绘画出圆形，我们在绘制时，也要设置成 360° 的弧度制。我们来看一下绘制的效果：

半圆以及顺时针逆时针的区别

我们绘制出来了一个圆形，那么半圆我们只需要把旋转角度设置为 180° 那么就可以实现，我们知道 counterclockwise 参数布尔值 false 为顺时针，true 为逆时针我们来看看顺时针与逆时针的效果。

js 复制代码

<template>
  <canvas ref="cnv" width="200" height="150" style="border: 1px dashed gray"></canvas>
</template>

<script setup>
import {ref, onMounted} from "vue";
const cnv = ref();

const drawSemicircle = () => {
  const ctx = cnv.value.getContext('2d');

  ctx.beginPath();
  ctx.arc(100, 75, 60, 0, 180 * Math.PI / 180, true);
  ctx.closePath();
  ctx.strokeStyle = "hotpink";
  ctx.stroke();

  ctx.beginPath();
  ctx.arc(100, 80, 60, 0, 180 * Math.PI / 180, false);
  ctx.closePath();
  ctx.strokeStyle = "hotpink";
  ctx.stroke();
}

onMounted(() => {
  drawSemicircle();
});
</script>

我们半径，与起始，结束角度都是相同的，只有 counterclockwise 参数值相反，上半圆是逆时针绘制，下半圆为逆时针绘制的效果，没有放在同一个圆心，主要是为了区分顺时针与逆时针绘制的效果。我们来看一下效果：

填充圆

从前面的学习，我们知道了填充的绘制方法：先设置填充颜色 ctx.fillStyle ，再进行填充绘制 ctx.fill() ；我们就上边的半圆进行填充绘制：

js 复制代码

const drawSemicircle = () => {
  const ctx = cnv.value.getContext('2d');

  ctx.beginPath();
  ctx.arc(100, 75, 60, 0, 180 * Math.PI / 180, true);
  ctx.closePath();
  ctx.fillStyle = "hotpink";
  ctx.fill();

  ctx.beginPath();
  ctx.arc(100, 80, 60, 0, 180 * Math.PI / 180, false);
  ctx.closePath();
  ctx.fillStyle = "#1677ff";
  ctx.fill();
}

从代码中我们可以看到，我们只是把 strokeStyle 属性换成了 fillStyle 属性，stroke 方法换成 fill 方法，我们就把填充图绘制出来了，这样看下来还是很简单的吧。

总结

回忆一下我们这一节的内容，很简单，就是圆的绘制，我们重点掌握绘制圆的方法：

<math xmlns="http://www.w3.org/1998/Math/MathML"> a r c ( x , y , r a d i u s , s t a r t A n g l e , e n d A n g l e , c o u n t e r c l o c k w i s e ) arc(x,y,radius,startAngle,endAngle,counterclockwise) </math>arc(x,y,radius,startAngle,endAngle,counterclockwise)

重点理解：

startAngle 与 endAngle 如果是相同的角度，那么是画不出圆的。
counterclockwise: 绘制方向 false 为顺时针绘制，反之为逆时针绘制。

下一节内容我们将讲解弧线的绘制，最终我们将封装一个绘制圆角矩形的方法。

Canvas 的知识点都将集中收录在《Canvas之路策马扬鞭》专栏中，从 0 到 1 系统的学习，文章的前后篇具有关联性，有需要的 jym 可以关注专栏！

【简简单单】Canvas 绘制圆与半圆

Canvas 曲线图形之圆与半圆

前言

绘制圆

描边圆

半圆以及顺时针逆时针的区别

填充圆

总结