动态八卦图html,HTML绘制太极八卦图

实现效果如下：

实现代码如下：

太极八卦图

div{

text-align: center;

margin-top: 30px;

}

#mytj{

background-color: skyblue;

}

var mytj = document.getElementById('mytj');

var mt = mytj.getContext('2d');

//左边黑色大半圆

mt.beginPath();

mt.arc(300,300,200,90*Math.PI/180,270*Math.PI/180,false);

mt.fillStyle='#000';

mt.fill();

//右边白色大半圆

mt.beginPath();

mt.arc(300,300,200,270*Math.PI/180,90*Math.PI/180,false);

mt.fillStyle='#fff';

mt.fill();

//左边白色中半圆

mt.beginPath();

mt.arc(300,200,100,90*Math.PI/180,270*Math.PI/180,false);

mt.fillStyle='#fff';

mt.fill();

//右边黑色中半圆

mt.beginPath();

mt.arc(300,400,100,270*Math.PI/180,90*Math.PI/180,false);

mt.fillStyle='#000';

mt.fill();

//左边黑色小圆

mt.beginPath();

mt.arc(300,200,50,0*Math.PI/180,360*Math.PI/180,false);

mt.fillStyle='#000';

mt.fill();

//右边白色小圆

mt.beginPath();

mt.arc(300,400,50,0*Math.PI/180,360*Math.PI/180,false);

mt.fillStyle='#fff';

mt.fill();

来源：https://www.cnblogs.com/lidyfamily/p/11543115.html