javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > Vue Canvas绘制圆与半圆

Vue使用Canvas绘制圆与半圆的示例详解

作者:炭烤小橙微辣

在 Canvas 中,基本图形包括直线图形和曲线图形,在我们的工作中,经常在统计图中会看到有饼状图等这样的圆弧图形,当然绘制曲线图形那么我们要知道曲线图形的绘制往往会涉及到曲线与弧线,所以本文就给大家介绍一下Canvas绘制圆与半圆的方法

前言

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

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

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

绘制圆

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

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

描边圆

还记的描边的语法吗?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个参数 360 * Math.PI / 180,圆我们从 0° 开始绘画,再回到原来的起画点,角度也应该是 0° ?感兴趣的 jym 可以试试,这样绘画出来其实什么都没有,我们都知道一周的角度是 360°,所以要想绘画出圆形,我们在绘制时,也要设置成 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 方法,我们就把填充图绘制出来了,这样看下来还是很简单的吧。

总结

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

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

重点理解:

以上就是Vue使用Canvas绘制圆与半圆的示例详解的详细内容,更多关于Vue Canvas绘制圆与半圆的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文