快捷導航

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

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

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

前言

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

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

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

曲線包含弧線；（弧線∈曲線）
弧線也是每個點具有相同曲率的曲線；

我們先對更簡單的圓弧展開繪制，但是要繪制圓弧，我們首先的先繪制圓吧？

繪制圓

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

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() 方法；

<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個參數(shù) 360 * Math.PI / 180，圓我們從 0° 開始繪畫，再回到原來的起畫點，角度也應(yīng)該是 0° ？感興趣的 jym 可以試試，這樣繪畫出來其實什么都沒有，我們都知道一周的角度是 360°，所以要想繪畫出圓形，我們在繪制時，也要設(shè)置成 360° 的弧度制。我們來看一下繪制的效果：

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

我們繪制出來了一個圓形，那么半圓我們只需要把旋轉(zhuǎn)角度設(shè)置為 180° 那么就可以實現(xiàn)，我們知道 counterclockwise 參數(shù)布爾值 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>

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

填充圓

從前面的學習，我們知道了填充的繪制方法：先設(shè)置填充顏色 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 方法，我們就把填充圖繪制出來了，這樣看下來還是很簡單的吧。