太极
.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();