canvas绘制八卦图

本文介绍了一种使用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();




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值