Canvas学习记录之arc

最新更新时间：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();

• 绘制-90°~90°圆弧

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

• 绘制0°~360°圆弧

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

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();

• 连续绘制两段圆弧使用 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();

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();

• 有背景色的单色环形

//背景色环形
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*3/2);
ctx.strokeStyle = '#000';
ctx.stroke();

• 有背景色的双色环形

//背景色环形
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();

• 三色均分环形

//第一段环形
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();

绘制球形

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

• fillStyle

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

ctx.fillStyle = '#000';

• fill

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

ctx.fill();

绘制半球形

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

绘制拱形

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

绘制扇形

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,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();

参考资料

• 无

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

打赏我吧^-^