Vue中使用Canvas绘制圆与半圆的完整指南

作者：微光时间：2026-10-30 23:24:06浏览：223

本文详解在Vue环境中使用Canvas API绘制圆与半圆的方法。重点解析arc函数的六个参数，包括圆心坐标、半径、起始与结束角度及绘制方向。通过描边与填充两种方式的代码示例，展示如何控制顺时针与逆时针效果，并指出起止角度相同时无法绘制圆形的注意事项。

前言

在Canvas绘图基础中，图形主要分为直线与曲线两类。前文已介绍直线图形的绘制，本节将聚焦于曲线图形。在实际开发中，统计图表如饼图常涉及圆弧元素。理解曲线与弧线的区别是绘制曲线图形的前提。

圆弧上的所有点具有相同的曲率，因此圆弧本质上是圆的一部分。
曲线的定义更为宽泛，它可以表现为直线、线段、弧线或折线等多种形式。

基于上述概念，我们可以得出以下结论：

曲线包含弧线（即弧线属于曲线的子集）。
弧线是曲率恒定的特定曲线。

为了绘制更复杂的圆弧，我们首先需要掌握圆的绘制方法。

绘制圆

绘制圆主要依赖Canvas提供的arc方法，其参数定义如下：

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

x：圆心O的横坐标。
y：圆心O的纵坐标。
radius：圆的半径r。
startAngle：绘制起始角度，单位为弧度（计算公式为：角度 * Math.PI / 180）。
endAngle：绘制结束角度，单位为弧度（计算公式为：角度 * Math.PI / 180）。
counterclockwise：布尔值，默认为false，表示顺时针绘制；若为true，则表示逆时针绘制。

描边圆

回顾描边语法，需使用ctx.stroke()方法。绘制圆形时，必须配合beginPath()与closePath()方法来开始和闭合路径。

<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°，则无法绘制出图形。因一周角度为 360°，故需将其转换为对应的弧度制数值以正确绘制圆形。

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

绘制半圆只需将旋转角度设置为180°。参数counterclockwise为false时执行顺时针绘制，为true时执行逆时针绘制。通过对比这两种效果，可以直观理解绘制方向对图形形态的影响。

<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()进行填充。以下代码演示了对半圆进行填充绘制的实现。

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方法即可实现，操作相对简单。