3.canvas绘制基本图形——圆弧

本文介绍了圆弧在图形绘制中的基本概念,着重于Arc函数的6个参数解释,包括圆心坐标、半径、起始点弧度、终点弧度以及圆弧方向。弧线不能直接“印章”,需通过fill或stroke单独实现填充或路径绘制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

圆弧是圆的组成部分,一个圆可以看成多个圆弧或者一个圆弧闭环组合而成。因此我们画圆弧的时候往往把他看成一个残缺的圆

arc

arc是最基础最简单的圆弧绘制方法。
他有六个参数
参数一跟参数二表示圆的圆心坐标
参数三是圆的半径
参数四是圆弧的起始点(单位是弧度表示,我们可以直接使用角度乘以Math.PI / 180这个固定公式进行转换,例如我们想要一个45度角的圆弧,那么参数四就直接可以写45* Math.PI / 180,当然您也可以直接使用Math.PI,例如2 * Math.PI就是360度的圆弧。
参数五是圆弧的终点(单位是弧度表示)
参数六表示圆绘制的方向,默认为false表示顺时针。
为了方便理解我画了一张草图来分别表示这些参数
请添加图片描述
在这里插入图片描述

需要注意的是弧线没有那么方便的“印章”方法,也就是说你想要一个显性的圆弧(不管是填充颜色的还是绘制路径的)都需要单独使用fill或者stroke来实现。

### 使用 HTML5 Canvas API 绘制贝塞尔曲线 在 HTML5 中,`<canvas>` 元素提供了一个绘图表面,允许开发者使用 JavaScript 来绘制图形。对于贝塞尔曲线绘制Canvas 提供了两种主要的方法:`quadraticCurveTo()` 和 `bezierCurveTo()`。 #### 二次贝塞尔曲线 二次贝塞尔曲线由起始点、结束点以及一个控制点定义。下面是一个简单的例子展示如何利用 `quadraticCurveTo()` 方法来实现这样的效果[^3]: ```javascript const canvas = document.getElementById(&#39;myCanvas&#39;); const ctx = canvas.getContext(&#39;2d&#39;); ctx.beginPath(); ctx.moveTo(75, 25); // 起始点 ctx.quadraticCurveTo(25, 100, 100, 100); // 控制点 (25, 100),终点 (100, 100) ctx.stroke(); // 渲染路径 ``` 这段代码会创建一条从 `(75, 25)` 开始经过控制点 `(25, 100)` 到达最终位置 `(100, 100)` 的平滑过渡线条。 #### 三次贝塞尔曲线 相比之下,三次贝塞尔曲线则更加复杂一些,因为它涉及到两个不同的控制点。这可以通过调用 `bezierCurveTo()` 函数完成[^4]: ```javascript const canvas = document.getElementById(&#39;myCanvas&#39;); const ctx = canvas.getContext(&#39;2d&#39;); ctx.beginPath(); ctx.moveTo(75, 40); // 第一对控制点坐标为 (85, 140),第二对为 (150, 20) ,最后到达目标点 (250, 100) ctx.bezierCurveTo(85, 140, 150, 20, 250, 100); ctx.stroke(); ``` 此段脚本将会画出一条更复杂的弯曲轨迹,它不仅考虑到了起点和终点之间的关系,还加入了额外的影响因素——即两组不同方向上的拉力使得整体形状更为灵活多变。 #### 圆弧绘制 除了贝塞尔曲线外,Canvas 还支持直接绘制圆弧。可以借助于 `arc()` 或者 `arcTo()` 方法轻松构建圆形部分或其他类型的弧形结构[^1]: ```javascript const canvas = document.getElementById(&#39;myCanvas&#39;); const ctx = canvas.getContext(&#39;2d&#39;); ctx.beginPath(); // 参数分别为中心(x,y),半径r,起始角度startAngle,终止角度endAngle,顺时针/逆时针direction ctx.arc(95, 50, 40, 0 * Math.PI / 180, 360 * Math.PI / 180, false); ctx.stroke(); ``` 这里展示了怎样围绕指定的位置 `(95, 50)` 创建一个完整的圆圈;当然也可以只生成特定范围内的扇区或弓形区域。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值