最新更新时间: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();
参考资料
- 无
感谢阅读,欢迎评论^-^