canvas绘制八卦图

最新推荐文章于 2025-07-08 12:34:15 发布

艾夏又更新了

最新推荐文章于 2025-07-08 12:34:15 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Canvas 文章标签： canvas 2d

本文为艾夏SEO博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/I_intern/article/details/53468820

Canvas 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用HTML5 Canvas API绘制八卦图的方法。通过简单的JavaScript代码实现了八卦图的绘制，包括大圆、左右中圆及小圆的绘制过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    

    
    // 获取对象
    var Canvas = document.querySelector('Canvas');
    //获取绘图环境
    var ctx = Canvas.getContext('2d');

    // 绘制八卦图
    // 3.1 大圆
    ctx.beginPath();
    ctx.arc(250,250,250,0,Math.PI,true);    
    ctx.closePath();
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(250,250,250,0,Math.PI,false);
    ctx.fill();
    ctx.closePath();
// 3.2 左中圆
    ctx.beginPath();
    ctx.arc(125,250,125,0,2*Math.PI,false);
    ctx.closePath();
    ctx.fill();
// 3.3右中圆
    ctx.beginPath();
    ctx.arc(375,250,125,0,2*Math.PI,false);
    ctx.closePath();
    ctx.fillStyle = '#fff';
    ctx.fill();

// 3.3 左小圆
    ctx.beginPath();
    ctx.arc(125,250,20,0,2*Math.PI,false);   
    ctx.closePath();
    ctx.fill();
 // 3.3 右小圆
    ctx.beginPath();
    ctx.arc(375,250,20,0,2*Math.PI,false);      
    ctx.closePath();
    ctx.fillStyle = '#000';
    ctx.fill();