android canvas 画圆,canvas-圆的绘制

圆可以在数据可视化中作为饼状图基础图形，也是在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();