快捷導(dǎo)航

Vue使用Canvas繪制圓與半圓的示例詳解

更新時(shí)間：2023年08月28日 08:42:34 作者：炭烤小橙微辣

在?Canvas?中,基本圖形包括直線圖形和曲線圖形,在我們的工作中,經(jīng)常在統(tǒng)計(jì)圖中會(huì)看到有餅狀圖等這樣的圓弧圖形,當(dāng)然繪制曲線圖形那么我們要知道曲線圖形的繪制往往會(huì)涉及到曲線與弧線,所以本文就給大家介紹一下Canvas繪制圓與半圓的方法

前言

在 Canvas 中，基本圖形包括直線圖形和曲線圖形，之前的文章已經(jīng)學(xué)習(xí)了直線圖形，接下來我們就開啟曲線圖形的學(xué)習(xí)。在我們的工作中，經(jīng)常在統(tǒng)計(jì)圖中會(huì)看到有餅狀圖等這樣的圓弧圖形，當(dāng)然繪制曲線圖形那么我們要知道曲線圖形的繪制往往會(huì)涉及到曲線與弧線，我們需要明天曲線與弧線的區(qū)別點(diǎn)：

弧線上的每個(gè)點(diǎn)都具有相同的曲率，那么曲率相同，自然就是圓的一部分，這有就是圓弧的由來。
曲線的概念就比較廣泛了，他可以是直線，可以是線段，可以是弧線，甚至可以是折線。

因此，我們可以現(xiàn)有的知識(shí)點(diǎn)上得出一些結(jié)論：

曲線包含弧線；（弧線∈曲線）
弧線也是每個(gè)點(diǎn)具有相同曲率的曲線；

我們先對(duì)更簡(jiǎn)單的圓弧展開繪制，但是要繪制圓弧，我們首先的先繪制圓吧？

繪制圓

我們來看一下繪制圓的方法：

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

x: 圓心 O 點(diǎn)橫坐標(biāo)；
y: 圓心 O 點(diǎn)縱坐標(biāo)；
radius: 半徑 r；
startAngle: 繪制開始角度(弧度制，即 角度 * Math.PI / 180)；
endAngle: 繪制開始角度(弧度制，即 角度 * Math.PI / 180)；
counterclockwise: 布爾值，默認(rèn)為 false，繪制方向順時(shí)針，反之為逆時(shí)針方向；

描邊圓

還記的描邊的語法嗎？ctx.stroke() 方法；

<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>

這里我們?cè)俅斡玫搅?beginPath 與 closePath 方法，表示開始一段路徑，閉合一段路徑，圓形的繪制需要這兩個(gè)方法的配合才能完成。我們重點(diǎn)來看一下 arc 方法中第5個(gè)參數(shù) 360 * Math.PI / 180，圓我們從 0° 開始繪畫，再回到原來的起畫點(diǎn)，角度也應(yīng)該是 0° ？感興趣的 jym 可以試試，這樣繪畫出來其實(shí)什么都沒有，我們都知道一周的角度是 360°，所以要想繪畫出圓形，我們?cè)诶L制時(shí)，也要設(shè)置成 360° 的弧度制。我們來看一下繪制的效果：

半圓以及順時(shí)針逆時(shí)針的區(qū)別

我們繪制出來了一個(gè)圓形，那么半圓我們只需要把旋轉(zhuǎn)角度設(shè)置為 180° 那么就可以實(shí)現(xiàn)，我們知道 counterclockwise 參數(shù)布爾值 false 為順時(shí)針，true 為逆時(shí)針我們來看看順時(shí)針與逆時(shí)針的效果。

<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>

我們半徑，與起始，結(jié)束角度都是相同的，只有 counterclockwise 參數(shù)值相反，上半圓是逆時(shí)針繪制，下半圓為逆時(shí)針繪制的效果，沒有放在同一個(gè)圓心，主要是為了區(qū)分順時(shí)針與逆時(shí)針繪制的效果。我們來看一下效果：

填充圓

從前面的學(xué)習(xí)，我們知道了填充的繪制方法：先設(shè)置填充顏色 ctx.fillStyle ，再進(jìn)行填充繪制 ctx.fill() ；我們就上邊的半圓進(jìn)行填充繪制：

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 方法，我們就把填充圖繪制出來了，這樣看下來還是很簡(jiǎn)單的吧。