前言

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

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

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

• 曲線包含弧線；（弧線∈曲線）
• 弧線也是每個(gè)點(diǎ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>

這里我們再次用到了 beginPath 與 closePath 方法，表示開始一段路徑，閉合一段路徑，圓形的繪制需要這兩個(gè)方法的配合才能完成。我們重點(diǎn)來看一下 arc 方法中第5個(gè)參數(shù) 360 * Math.PI / 180，圓我們從 0° 開始繪畫，再回到原來的起畫點(diǎn)，角度也應(yīng)該是 0° ？感興趣的 jym 可以試試，這樣繪畫出來其實(shí)什么都沒有，我們都知道一周的角度是 360°，所以要想繪畫出圓形，我們在繪制時(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é)

回憶一下我們這一節(jié)的內(nèi)容，很簡單，就是圓的繪制，我們重點(diǎn)掌握繪制圓的方法：

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

重點(diǎn)理解：

• startAngle 與 endAngle 如果是相同的角度，那么是畫不出圓的。
• counterclockwise: 繪制方向 false 為順時(shí)針繪制，反之為逆時(shí)針繪制。

以上就是Vue使用Canvas繪制圓與半圓的示例詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue Canvas繪制圓與半圓的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論