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绘制圆与半圆的资料请关注脚本之家其它相关文章！
相关文章
使用javascript过程中，偶尔会用到数值，而且是打乱后的数值，本文将介绍一种高效打乱数组的方法,需要的朋友可以参考下2012-12-12
这篇文章主要给大家讲解一下JavaScript中的类型判断与类型转换的基本概念和使用方法,对我们的学习JavaScript的类型判断与转换有一定的帮助,需要的朋友可以参考下2023-07-07
这篇文章主要为大家详细介绍了JS实现简单打砖块弹球小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
解决ie6下png透明的问题想必前端都比较清楚，虽然有很多方法，但是我觉得用JS还是最省事的方法，不管是图片还是背景图片都OK。2013-08-08
javascript 控制弹出窗口...2007-04-04
用javascript取得传递参数的个数的代码...2007-10-10
这篇文章主要介绍了javascript动态生成树形菜单的方法,涉及JavaScript针对页面元素与属性的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
JavaScript滚动条属性scrollTop和scrollHeight
在开发中我们常常会用到判断滚动条是否触底的逻辑,我一般都会在网上搜一段代码,这段代码有用到scrollTop、clientHeight、 scrollHeight,这篇文章主要给大家介绍了关于JavaScript滚动条属性scrollTop和scrollHeight的相关资料,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了Javascript的&&和||的另类用法,需要的朋友可以参考下2014-07-07
下面小编就为大家带来一篇JS获取IMG图片高宽的简单实例。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
最新评论