圆可以在数据可视化中作为饼状图基础图形，也是在canvas中必不可少的图形
语法：
ctx.arc(x, y, radius, startAngle, endAngle, Boolean)
圆心坐标: (x, y)
半径: radius
起始角度: startAngle
结束角度: endAngle
是否逆时针旋转: false 代表顺时针旋转
// 开始绘制路径
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = 'red';
// 绘制圆的路径**
ctx.arc(100, 100, 50, 0, Math.PI * 2, false);
// 0°是从三点钟方向开始的
// 描边路径
ctx.stroke();
image.png
画圆就是如此简单~
了解圆的方向
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.translate(250, 250);
// 顺时针
ctx.arc(0, 0, 100, 0, 2 * Math.PI / 4 * 3);
// 是否闭合路径 : 闭合路径后起点与终点会连接
// ctx.closePath();
ctx.stroke();
ctx.font = '16px bold';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('0°', 120, 0);
ctx.fillText('90°', 0, 120);
ctx.fillText('180°', -120, 0);
ctx.fillText('270°', 0, -120);
圆的方向.PNG
closePath.gif
栗子： 再来个圆~
步骤:
- 先画中心点的圆
- 再画起始点的圆
- 在画圆的路径
- 最后画上结束点的圆
image.png
var draw = document.getElementById('draw');
// 2D上下文 ： 可会知简单的2D图形，矩形 弧形 路径
var ctx = draw.getContext('2d');
// 重新初始化一下画布
function initCtx() {
// 清除画布
ctx.clearRect(0, 0, 500, 500);
ctx.strokeStyle = '#333';
ctx.lineWidth = 1;
// 通过for, 循环执行画线动作
for (var i = 0; i <= 10; i++) {
// 开始绘制路径
ctx.beginPath();
// (列)
// 路径的起点 (下笔)
ctx.moveTo(i * 50, 0);
// 路径的终点 (提笔)
ctx.lineTo(i * 50, 500);
// (行)
// 路径的起点 (下笔)
ctx.moveTo(0, i * 50);
// 路径的终点 (提笔)
ctx.lineTo(500, i * 50);
// 关闭路径
ctx.closePath();
// 描边路径
ctx.stroke();
}
}
// 初始化
initCtx();
// 开始画x轴，y轴
ctx.beginPath();
ctx.strokeStyle = 'orange';
ctx.lineWidth = 4;
ctx.moveTo(50, 250);
ctx.lineTo(450, 250);
ctx.fillText('X', 50, 240);
ctx.moveTo(250, 50);
ctx.lineTo(250, 450);
ctx.fillText('Y', 250, 40);
ctx.stroke();
