canvas 环形饼状图_canvas-圆的绘制

最新推荐文章于 2022-04-09 15:45:14 发布

房东家的狗

最新推荐文章于 2022-04-09 15:45:14 发布

阅读量127

点赞数

文章标签： canvas 环形饼状图

本文链接：https://blog.csdn.net/weixin_34696006/article/details/112479007

版权

本文介绍了如何使用canvas来创建环形饼状图，强调了画圆的基本步骤，包括确定圆心、起点、路径和终点，是数据可视化的实用技巧。

摘要由CSDN通过智能技术生成

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

画圆就是如此简单~

了解圆的方向

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

再来个圆~

步骤:

先画中心点的圆
再画起始点的圆
在画圆的路径
最后画上结束点的圆

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