学习Canvas基础-绘制弧线和曲线
绘制曲线和弧线的方法
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)
用于绘制圆或部分圆。
参数：
x-圆弧中心（圆心）的 x 轴坐标。
y-圆弧中心（圆心）的 y 轴坐标。
radius-圆弧的半径。
startAngle-圆弧的起始点，x 轴方向开始计算，单位以弧度表示。
endAngle-圆弧的终点，单位以弧度表示。
anticlockwise-可选的Boolean值，如果为 true，逆时针绘制圆弧，反之，顺时针绘制。ctx.arcTo(x1, y1, x2, y2, radius)
用于在画布上绘制介于两个切线之间的弧线。
参数：
x1-第一个控制点的 x 轴坐标。
y1-第一个控制点的 y 轴坐标。
x2-第二个控制点的 x 轴坐标。
y2-第二个控制点的 y 轴坐标。
radius-圆弧的半径。ctx.quadraticCurveTo(cpx, cpy, x, y)
绘制二次贝塞尔曲线路径的方法。
参数：
cpx-控制点的 x 轴坐标。
cpy-控制点的 y 轴坐标。
x-终点的 x 轴坐标。
y-终点的 y 轴坐标。ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
绘制三次贝赛尔曲线路径的方法。
参数：
cp1x-第一个控制点的 x 轴坐标。
cp1y-第一个控制点的 y 轴坐标。
cp2x-第二个控制点的 x 轴坐标。
cp2y-第二个控制点的 y 轴坐标。
x-结束点的 x 轴坐标。
y-结束点的 y 轴坐标。
事例一
绘制圆弧路径ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)
arc() 方法用于创建用于创建圆或部分圆。
绘制一整个圆。
<!-- 兼容性写法，在低版本时标签内部的文字才会显示 --><canvas id="cont" width="500px" height="500px">你的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas><script>// 获取canvas画布const canvas = document.querySelector('#cont')// 获取画布的应用上下文const ctx = canvas.getContext('2d')//绘制圆弧的方法// ctx.arc(圆心X,圆心Y，半径，开始角度，结束角度，顺时针还是逆时针)默认是顺时针，逆时针更改为true//绘制圆心在（200,200，半径为100的圆。ctx.beginPath()ctx.arc(200, 200, 100, 0, Math.PI*2 )ctx.lineWidth = 5// 显示路径ctx.stroke()ctx.closePath()</script>
绘制笑脸图像。
<!-- 兼容性写法，在低版本时标签内部的文字才会显示 --><canvas id="cont" width="500px" height="500px">你的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas><script>// 获取canvas画布const canvas = document.querySelector('#cont')// 获取画布的应用上下文const ctx = canvas.getContext('2d')//绘制圆弧的方法// ctx.arc(圆心X,圆心Y，半径，开始角度，结束角度，顺时针还是逆时针)默认是顺时针，逆时针更改为true// 绘制嘴巴ctx.beginPath()ctx.arc(200, 200, 70, 0, Math.PI )// 设置颜色ctx.strokeStyle='red'// 显示路径ctx.stroke()ctx.closePath()// 绘制脸蛋ctx.beginPath()ctx.arc(200, 200, 100, 0, Math.PI*2 )ctx.strokeStyle='#000'ctx.stroke()ctx.closePath()// 绘制左眼睛ctx.beginPath()ctx.arc(160, 170, 10, 0, Math.PI*2 )ctx.strokeStyle='#000'ctx.stroke()ctx.closePath()// 绘制右眼睛ctx.beginPath()ctx.arc(240, 170, 10, 0, Math.PI*2 )ctx.strokeStyle='#000'ctx.stroke()ctx.closePath()</script>
事例二
ctx.arcTo(x1, y1, x2, y2, radius)
arcTo() 方法用于在画布上绘制介于两个切线之间的弧。
这是一段绘制圆弧的简单的代码片段。基础点是蓝色的，两个控制点是红色的。
<!-- 兼容性写法，在低版本时标签内部的文字才会显示 --><canvas id="cont" width="500px" height="500px">你的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas><script>// 获取canvas画布const canvas = document.querySelector('#cont')// 获取画布的应用上下文const ctx = canvas.getContext('2d')ctx.beginPath()// 移动到起点位置ctx.moveTo(100,100)// ctx.arcTo(第一个控制点X,第一个控制点点Y,第二个控制点X,第二个控制点Y, 圆弧半径);ctx.arcTo(200,100,200,200, 50);// ctx.fill() ctx.stroke()ctx.closePath()</script>
事例三
二次贝塞尔曲线ctx.quadraticCurveTo(cpx, cpy, x, y)
二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。所以如果路径不存在，那么需要先使用 beginPath() 和 moveTo() 方法来定义开始点。
绘制一个聊天气泡
<!-- 兼容性写法，在低版本时标签内部的文字才会显示 --><canvas id="cont" width="600px" height="400px">你的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas><script>// 获取canvas画布const canvas = document.querySelector('#cont')// 获取画布的应用上下文const ctx = canvas.getContext('2d')// 使用quadraticCurveTo绘制二次贝塞尔曲线，完成消息框效果。// ctx.quadraticCurveTo(控制点x, 控制点Y, 结束点x, 结束点y);// 放下画笔ctx.beginPath()// 移动画笔位置ctx.moveTo(200,200)ctx.quadraticCurveTo(150,200,150,150);ctx.quadraticCurveTo(150,100,200,100);// 画一条线段ctx.lineTo(300,100)ctx.quadraticCurveTo(350,100,350,150);ctx.quadraticCurveTo(350,200,250,200);ctx.quadraticCurveTo(250,240,180,250);ctx.quadraticCurveTo(200,240,200,200);// 绘制边框效果ctx.stroke()// ctx.fill()ctx.closePath()</script>
轮廓效果
填充效果
事例四
三次贝塞尔曲线 ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么也是需要先使用 beginPath() 和 moveTo() 方法来定义开始点。
绘制一个填充的爱心
<!-- 兼容性写法，在低版本时标签内部的文字才会显示 --><canvas id="cont" width="600px" height="400px">你的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas><script>// 获取canvas画布const canvas = document.querySelector('#cont')// 获取画布的应用上下文const ctx = canvas.getContext('2d')// 使用bezierCurveTo绘制三次贝塞尔曲线，绘制爱心效果。// ctx.bezierCurveTo(控制点x, 控制点Y, 第二控制点x，第二控制点Y，结束点x, 结束点y);// 放下画笔ctx.beginPath()// 移动画笔位置ctx.moveTo(300,180)ctx.bezierCurveTo(350,100,500,200,300,350)ctx.bezierCurveTo(100,200,250,100,300,180)// 添加描边的颜色// ctx.strokeStyle = 'red'// 绘制边框效果ctx.stroke()// 添加填充的颜色ctx.fillStyle = 'red'// 绘制填充效果ctx.fill()ctx.closePath()</script>
学习Canvas基础-绘制弧线和曲线相关推荐
- 学习Canvas基础-绘制文字
方法 font () 描述绘制文字时,当前字体样式的属性 参数: ctx.font = value value: 符合 CSS font 语法的DOMString 字符串.默认字体是 10px san ...
- cesium模型不遮挡点线面_cesium 学习(八) 基础绘制（点线面）
一.前言 对于一个地图GIS场景,绘制点.线.面属于是基础功能,无论是二维地图还是三维地图场景均是如此,尤其对于三维场景来说比二维应该是更加困难了些. 但是基础的简单绘制不用考虑太多,下面我们开始学习 ...
- html绘制圆形和弧形的代码,通过HTML5 Canvas API绘制弧线和圆形的教程
在html5中,CanvasRenderingContext2D对象也提供了专门用于绘制圆形或弧线的方法,请参考以下属性和方法介绍: JavaScript Code复制内容到剪贴板 arc(x, y, ...
- canvas基础-绘制矩形（1）
1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的& ...
- html五绘制弧线的方法是,使用HTML5 Canvas API绘制弧线的教程
绘制标准圆弧 在开始之前,我们优化一下我们的作图环境.灵感来自于上节课的纹理,如果不喜欢这个背景,我在images目录下还提供了其他的背景图,供大家选择.另外把所有的样式表都写在了 下.JavaScr ...
- 学习Canvas基础-圆柱渐变、设置底纹（createPattern）
1.圆柱渐变 // createconicgradient()方法在给定坐标的点周围创建渐变. // createConicGradient(startAngle, x, y) // 参数: // s ...
- 自定义控件之Canvas图形绘制基础练习-青春痘笑脸^_^
对于自定义控件的意义不言而喻,所以对它的深入研究是很有必要的,前些年写过几篇关于UI效果的学习过程,但是中途比较懒一直就停滞了,而对于实际工作还是面试来说系统深入的了解自定义控件那是很有必要的,所以接 ...
- 【TikZ 简单学习(下)：基础绘制】Latex下的绘图宏包
[TikZ 简单学习[下]:基础绘制]Latex下的绘图宏包 上文 绘制多个节点 给节点添加统一样式 给节点命名 使用相对位置绘制 给节点标签 链接边的绘制 在线边上添加标签 绘制蛇形线和多行文本 层 ...
- canvas在舞台上点击后图片旋转_View绘制系列(10)Canvas基础变换
Canvas基础变换 前面学习了Canvas相关的一些绘制方法,不知道大家发现没?我们都是根据左上角(0,0)点算出来新的坐标,然后再绘制,这样明显不符合我们平常基于坐标原点绘制的习惯,那么我们能不能 ...
最新文章
- 禁用/启用按钮和链接的最简单方法是什么（jQuery + Bootstrap）
- 美国计算机科学发展,美国计算机工程发展现状
- centos 7 php7 yum源
- [转]程序实现调用迅雷(以C#为例)
- HTTP 协议知识点总结（一）
- LeetCode 823. 带因子的二叉树（动态规划）
- 作者：海沫，女，博士，中央财经大学信息学院副教授，CCF高级会员。
- android intent拍照,Android通过Intent方式调用相机拍照取得图片
- Kali Linux 秘籍 第二章 定制 Kali Linux
- int、String、char、Array之间的转换，这一篇够了！！！
- java 生成ai矢量图_(针对新手)AI将位图图标转换为矢量图方法
- 电脑W7系统怎样安装鸿蒙系统,家用电脑升级win7系统的操作方法
- matlab基波有效值,基波有效值
- 京东商城网页数据爬取
- NOI前的做题计划记录
- ChatGPT中文使用手册
- Java毕业设计-社区疫情管理小程序
- 七夕送什么蓝牙耳机？时尚好用的蓝牙耳机推荐
- 时光机特效什么app好？建议收藏这些软件
- 字符串中大小写转换输出