Vue使用Canvas绘制圆与半圆的示例详解
前言
在 Canvas 中，基本图形包括直线图形和曲线图形，之前的文章已经学习了直线图形，接下来我们就开启曲线图形的学习。 在我们的工作中，经常在统计图中会看到有饼状图等这样的圆弧图形，当然绘制曲线图形那么我们要知道曲线图形的绘制往往会涉及到曲线与弧线，我们需要明天曲线与弧线的区别点：
- 弧线上的每个点都具有相同的曲率，那么曲率相同，自然就是圆的一部分，这有就是圆弧的由来。
- 曲线的概念就比较广泛了，他可以是直线，可以是线段，可以是弧线，甚至可以是折线。
因此，我们可以现有的知识点上得出一些结论：
- 曲线包含弧线；（弧线∈曲线）
- 弧线也是每个点具有相同曲率的曲线；
我们先对更简单的圆弧展开绘制，但是要绘制圆弧，我们首先的先绘制圆吧？
绘制圆
我们来看一下绘制圆的方法：
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个参数 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)
重点理解：
- startAngle 与 endAngle 如果是相同的角度，那么是画不出圆的。
- counterclockwise: 绘制方向 false 为顺时针绘制，反之为逆时针绘制。
以上就是Vue使用Canvas绘制圆与半圆的示例详解的详细内容，更多关于Vue Canvas绘制圆与半圆的资料请关注脚本之家其它相关文章！
相关文章
让firefox支持IE的一些方法的javascript扩展函数代码
因为一些代码，只能在IE下实现，如果用firefox实现就必须用一些扩展函数。2010-01-01
javascript+HTML5 canvas绘制时钟功能示例
这篇文章主要介绍了javascript+HTML5 canvas绘制时钟功能,结合实例形式分析了javascript+HTML5 canvas数值运算、图形绘制与时间显示相关操作技巧,需要的朋友可以参考下2019-05-05
本文主要介绍了js获取数组对象中的全部key和value值，主要使用JavaScript的 map() 函数和 values() 迭代器来实现取出数组对象的所有key值和value值，感兴趣的可以了解下2024-01-01
JSON 对象是我们经常使用的一种数据存储对象,它的适用范围非常广,JSON.stringify 方法可以帮我们把一个对象或数组转换成一个 JSON字符串,本文我们给大家详细介绍一下JavaScript中JSON.stringify方法,需要的朋友可以参考下2023-09-09
下面小编就为大家带来一篇原生js获取元素样式的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要介绍了JavaScript设计模式之外观模式介绍,外观模式是用于由于子系统或程序组成较复杂而提供的一个高层界面接口,使用客户端更容易访问底层的程序或系统接口,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了小程序兼容安卓和IOS数据处理问题及坑，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了微信小程序按钮去除边框线分享页面功能，文中通过一段简单的代码给大家介绍了微信小程序的button去边框的方法，感兴趣的朋友跟随脚本之家小编一起看看吧2018-08-08
这篇文章主要介绍了javascript实现列表滚动的方法,较为详细的分析了javascript实现列表滚动的页面布局及javascript滚动效果的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
webpack有两种组织模块依赖的方式，同步和异步，这篇文章主要介绍了webpack动态加载与打包方式，本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下2023-02-02
最新评论