html5 画太极图,canvas基础画太极图(娱乐~)

太极

.canvas{

animation: scroll1 3s linear infinite;

}

@keyframes scroll1{

0%{

transform: rotateZ(0deg);

}

100%{

transform: rotateZ(720deg);

}

}

var myCanvas = document.getElementById('myCanvas1');

var g = myCanvas.getContext('2d');

// 下半圆

g.beginPath();

g.strokeStyle = 'black';

g.arc(250,250,250,0,Math.PI,false);

// g.closePath();

g.fillStyle = 'black';

g.fill();

g.stroke();

// 上半圆

g.beginPath();

g.strokeStyle = 'black';

g.arc(250,250,250,0,Math.PI,true);

// g.closePath();

g.stroke();

// 右半圆

g.beginPath();

g.strokeStyle = 'white';

g.arc(375,250,125,0,Math.PI,true);

// g.closePath();

g.fillStyle = 'black';

g.fill();

g.stroke();

// 左半圆

g.beginPath();

g.strokeStyle = 'white';

g.arc(125,250,125,Math.PI,0,true);

// g.closePath();

g.fillStyle = 'white';

g.fill();

g.stroke();

// 上小圆

g.beginPath();

g.strokeStyle = 'black';

g.arc(375,225,25,0,2*Math.PI,true);

// g.closePath();

g.fillStyle = 'white'

g.fill();

g.stroke();

// 下小圆

g.beginPath();

g.strokeStyle = 'black';

g.arc(125,275,25,0,2*Math.PI,true);

// g.closePath();

g.fillStyle = 'black';

g.fill();

g.stroke();