canvas绘制八卦图

最新推荐文章于 2023-07-10 16:00:10 发布

原创最新推荐文章于 2023-07-10 16:00:10 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

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

文章标签：

#canvas #2d

Canvas 专栏收录该内容

7 篇文章

订阅专栏

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

    

    
    // 获取对象
    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();