Canvas是HTML5中新增的元素，专门用来绘制图形，相当于在页面中放了一张“画布”，可以在里面绘制图形，但是不是指用鼠标画图，而是需要用Javascript编写需要绘制的图形的脚本。
我们利用canvas可以绘制出下图：
在绘制上图之前，我们先来看下相关知识点：
一、 开始创建路径
使用beginPath方法开始创建路径。beginPath() 方法表示开始一条路径，或重置当前的路径。简单来说，其实就是告诉画布，我要开始画草稿了，请把之前的草稿都清除掉。
这个方法不设置参数，通过调用这个方法开始创建路径，在案例中我们需要循环绘制圆形，在循环的几次创建路径的过程中，每次开始创建是都要调用beginPath()。
语法是：
context. beginPath ();
二、 创建圆形路径
创建圆形路径的时候，需要使用图形上下文对象的arc()方法，这个方法的定义是：
arc() 方法创建弧/曲线(用于创建圆或部分圆)。
这个方法的语法是：
这个方法使用6个参数，
x为圆的中心的 x 坐标;
y为圆的中心的 y 坐标;
r为圆的半径;sAngle为起始角，以弧度计(弧的圆形的三点钟位置是 0 度);
eAngle为结束角，以弧度计;
counterclockwise为规定应该逆时针还是顺时针绘图(False = 顺时针，true = 逆时针)。
arc()方法不仅可以绘制圆形，还可以绘制圆弧形，因此，必须指定起始角和结束角
三、 关闭路径
路径创建完毕后，使用图形上下文对象的closePath()方法关闭路径。
closePath() 方法创建从当前点到开始点的路径。
语法：
context.closePath();
关闭路径后，路径的创建工作就完成了。但是需要注意的是，这个时候只是路径创建完毕而已，还没有真正绘制任何图形。我们接着来学习如何设置绘制样式和填充当前路径。
>>本文地址：https://www.ujiuye.com/zhuanye/2020/48620.html
声明:本站稿件版权均属中公教育优就业所有，未经许可不得擅自转载。
1 您的年龄
2 您的学历
3 您更想做哪个方向的工作？
大前端
大数据
互联网营销
Java
Linux
Python
嵌入式
全域电商运营
软件测试
室内设计
平面设计
电商设计
网页设计
UI设计
VR/AR
网络安全
新媒体
直播带货
智能机器人
中公教育IT培训品牌
400-650-7353
Copyright©1999-
北京中公教育科技有限公司 .All Rights Reserved
京ICP备10218183号-88
京ICP证161188号
京公网安备11010802020723号
投诉建议：400-650-7353
Java培训
软件测试培训
Web培训
Linux培训
Python培训
互联网营销培训
UI培训
大数据培训
官方公众号 回复"大礼包"享福利 
领学习资料 分享IT知识 
阅读()
分享
手机端入口
