Canvas学习记录之arc

旧城等待， 2023-07-14 08:21 58阅读 0赞

###### *最新更新时间：2020年03月14日00:58:55* ######

#### [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] ####

> 本文内容：本文介绍基于`arc()绘制圆弧路径`的一些基本用法，圆弧、圆形、环形、球形、扇形、饼状图

#### 创建二维渲染上下文 ####

var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

#### arc ####

> 绘制一个圆弧，六个入参依次为：圆心x轴坐标、圆心y轴坐标、半径、圆弧起点弧度`(3点钟方向坐标点为0弧度)`、圆弧终点弧度、圆弧方向`(true-逆时针，false-顺时针，默认不填为false)`

ctx.arc(x,y,r,start_radian,stop_radian,anticlockwise);

*  绘制0°~90°圆弧

ctx.beginPath();
    ctx.arc(51,51,50,0,Math.PI/2);
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#000';
    ctx.stroke();

![在这里插入图片描述][2020031323271679.png]

*  绘制-90°~90°圆弧

ctx.beginPath();
    ctx.arc(51,51,50,-Math.PI/2,Math.PI/2);
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#000';
    ctx.stroke();

![在这里插入图片描述][20200313233026548.png]

*  绘制0°~360°圆弧

ctx.beginPath();
    ctx.arc(51,51,50,0,Math.PI*2);
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#000';
    ctx.stroke();

![在这里插入图片描述][20200313233213205.png]

#### beginPath ####

>  *  官方解释，清空子路径列表开始一个新路径的方法，也就是说从上一个绘制路径的终点跳跃到下一个路径的起点
>  *  这个方法不需要任何入参

*  连续绘制两段圆弧不用 beginPath 的效果

> 第一个圆弧的终点到第二个圆弧的起点自动绘制了一条直线，并且第一段圆弧的颜色没有生效

//绘制第一个圆弧
    ctx.beginPath();
    ctx.arc(51,51,50,0,Math.PI/2);
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#000';
    ctx.stroke();
    //开始绘制第二个圆弧
    // ctx.beginPath();
    ctx.arc(31,31,30,0,Math.PI*2);
    ctx.strokeStyle = '#fff';
    ctx.stroke();

![在这里插入图片描述][20200313234345982.png]

*  连续绘制两段圆弧使用 beginPath 的效果

> 两个圆弧清晰可见，线条颜色区分鲜明

//绘制第一个圆弧
    ctx.beginPath();
    ctx.arc(51,51,50,0,Math.PI/2);
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#000';
    ctx.stroke();
    //开始绘制第二个圆弧
    ctx.beginPath();
    ctx.arc(31,31,30,0,Math.PI*2);
    ctx.strokeStyle = '#fff';
    ctx.stroke();

![在这里插入图片描述][20200313234411551.png]

#### lineWidth ####

> canvas上下文的setter方法，通过赋值设置画笔绘制时的线条宽度

ctx.lineWidth = 1;

#### strokeStyle ####

> canvas上下文的setter方法，通过赋值设置画笔绘制时的线条颜色

ctx.strokeStyle = '#000';

#### stroke ####

> 根据当前的画线样式，绘制当前或已经存在的路径，比如调用arc绘制圆弧、rect绘制矩形等方法之后需要绘制出图形

ctx.stroke();

#### 绘制一个环形 ####

*  单色环形

ctx.beginPath();
    ctx.arc(55,55,50,0,Math.PI*3/2);
    ctx.lineWidth = 10;
    ctx.strokeStyle = '#000';
    ctx.stroke();

![在这里插入图片描述][20200314000033734.png]

*  有背景色的单色环形

![在这里插入图片描述][20200314000920267.png]

*  有背景色的双色环形

//背景色环形
    ctx.beginPath();
    ctx.arc(55,55,50,0,Math.PI*2);
    ctx.lineWidth = 10;
    ctx.strokeStyle = '#ccc';
    ctx.stroke();
    //第一段环形
    ctx.beginPath();
    ctx.arc(55,55,50,0,Math.PI/2);
    ctx.strokeStyle = '#000';
    ctx.stroke();
    //第二段环形
    ctx.beginPath();
    ctx.arc(55,55,50,Math.PI/2,Math.PI);
    ctx.strokeStyle = '#ff77ff';
    ctx.stroke();

![在这里插入图片描述][20200314001036948.png]

*  三色均分环形

//第一段环形
    ctx.beginPath();
    ctx.arc(55,55,50,0,Math.PI*2/3);
    ctx.lineWidth = 10;
    ctx.strokeStyle = '#ccc';
    ctx.stroke();
    //第二段环形
    ctx.beginPath();
    ctx.arc(55,55,50,Math.PI*2/3,Math.PI*4/3);
    ctx.strokeStyle = '#000';
    ctx.stroke();
    //第三段环形
    ctx.beginPath();
    ctx.arc(55,55,50,Math.PI*4/3,Math.PI*2);
    ctx.strokeStyle = '#ff77ff';
    ctx.stroke();

![在这里插入图片描述][20200314001055884.png]

#### 绘制球形 ####

ctx.beginPath();
    ctx.arc(50,50,50,0,Math.PI*2);
    ctx.fillStyle = '#000';
    ctx.fill();

![在这里插入图片描述][20200314002317968.png]

*  fillStyle

> canvas上下文的setter方法，通过赋值设置图形的填充颜色

ctx.fillStyle = '#000';

*  fill

> 根据当前的填充样式，填充当前或已存在的路径的方法。采取非零环绕或者奇偶环绕规则。

ctx.fill();

#### 绘制半球形 ####

ctx.beginPath();
    ctx.arc(50,50,50,0,Math.PI);
    ctx.fillStyle = '#000';
    ctx.fill();

![在这里插入图片描述][2020031400392145.png]

#### 绘制拱形 ####

ctx.beginPath();
    ctx.arc(50,50,50,0,Math.PI/2);
    ctx.fillStyle = '#000';
    ctx.fill();

![在这里插入图片描述][2020031400583972.png]

#### 绘制扇形 ####

ctx.beginPath();
    ctx.arc(50,50,50,0,Math.PI/3);
    ctx.lineTo(50, 50);
    ctx.fillStyle = '#7FFFAA';
    ctx.fill();

![在这里插入图片描述][20200314010359998.png]

#### 绘制饼状图 ####

//第一个扇形区域
    ctx.beginPath();
    ctx.arc(50,50,50,0,Math.PI/3);
    ctx.lineTo(50, 50);
    ctx.fillStyle = '#7FFFAA';
    ctx.fill();
    //第二个扇形区域
    ctx.beginPath();
    ctx.arc(50,50,50,Math.PI/3,Math.PI);
    ctx.lineTo(50, 50);
    ctx.fillStyle = '#FAFAD2';
    ctx.fill();
    //第三个扇形区域
    ctx.beginPath();
    ctx.arc(50,50,50,Math.PI,Math.PI*3/2);
    ctx.lineTo(50, 50);
    ctx.fillStyle = '#ff77ff';
    ctx.fill();
    //第四个扇形区域
    ctx.beginPath();
    ctx.arc(50,50,50,Math.PI*3/2,Math.PI*2);
    ctx.lineTo(50, 50);
    ctx.fillStyle = '#A9A9A9';
    ctx.fill();

![在这里插入图片描述][20200314005438779.png]

#### 参考资料 ####

*  无

> 感谢阅读，欢迎评论^-^

## [`打赏我吧^-^`][-] ##

[-_-]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[2020031323271679.png]: /images/20230529/e61b7206639a43e4a03f16255639c416.png
[20200313233026548.png]: /images/20230529/043e7fec3ef14afcb48df4f9a4035752.png
[20200313233213205.png]: /images/20230529/3b6d085db18f4fe1acf177c3cfa8a34a.png
[20200313234345982.png]: /images/20230529/82758d79dcb148d094f17d16570c3e2f.png
[20200313234411551.png]: /images/20230529/45cb58aba58545bfbb5c2807710f0771.png
[20200314000033734.png]: /images/20230529/cd2617a94bd94290a755f2af095735ae.png
[20200314000920267.png]: /images/20230529/be6398c4ebd24a3f8c88902c270dd61e.png
[20200314001036948.png]: /images/20230529/8f2962b189ee46edadc7ec93e99f5396.png
[20200314001055884.png]: /images/20230529/299aed61498a4282ad33ca3fab8da63e.png
[20200314002317968.png]: /images/20230529/34c79d788b594ed49e45a23e0d97f35f.png
[2020031400392145.png]: /images/20230529/3f22607df0f44a9ebb255bfc1e545f0d.png
[2020031400583972.png]: /images/20230529/0091c01980744f2b85d67ac87e19dcfb.png
[20200314010359998.png]: /images/20230529/52db0f25a3254646a5e576700ba3bd70.png
[20200314005438779.png]: /images/20230529/803ecfd20e9b4000aa3e8a61649fc358.png
[-]: https://blog.csdn.net/wanshaobo888/article/details/86249460