canvas实现太极图

Html

Css

div {
	width:600px;
	height:600px;
	background-color:#C1C1C1;
	text-align:center;
	margin:0 auto;
}
canvas {
	margin-top:100px;
	animation:xz 2s infinite linear;
}
@keyframes xz {
	0% {
	transform:rotate(0deg);
}
100% {
	transform:rotate(360deg);
}
}

window.onload = function() {
    var cv = document.getElementById('cv');
    var cxt = cv.getContext('2d'); //获取画布

//画白 大半圆
    cxt.beginPath();
    cxt.arc(150, 150, 150, -Math.PI * 0.5, -Math.PI * 1.5, true);
    cxt.closePath();
    cxt.fillStyle = '#FFFFFF';
    cxt.lineWidth = 1;
    cxt.fill();

//画黑 大半圆
    cxt.beginPath();
    cxt.arc(150, 150, 150, -Math.PI * 0.5, Math.PI * 0.5, false);
    cxt.closePath();
    cxt.fillStyle = '#000000';
    cxt.lineWidth = 1;
    cxt.fill();

//画黑中半圆
    cxt.beginPath();
    cxt.arc(150, 75, 75, -Math.PI * 0.5, -Math.PI * 1.5, true);
    cxt.closePath();
    cxt.fillStyle = '#000000';
    cxt.lineWidth = 1;
    cxt.fill();

//画白 中半圆
    cxt.beginPath();
    cxt.arc(150, 225, 75, -Math.PI * 0.5, Math.PI * 0.5, false);
    cxt.closePath();
    cxt.fillStyle = '#ffffff';
    cxt.lineWidth = 1;
    cxt.fill();

//画小黑圆
    cxt.fillStyle = '#000000';
    cxt.beginPath();
    cxt.arc(150, 225, 30, 0, Math.PI * 2, true);
    cxt.closePath();
    cxt.lineWidth = 1;
    cxt.fill();

//画小白圆
    cxt.fillStyle = '#FFFFFF';
    cxt.beginPath();
    cxt.arc(150, 75, 30, 0, Math.PI * 2, true);
    cxt.closePath();
    cxt.lineWidth = 1;
    cxt.fill();

};

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

canvas实现太极图



代码描述：看到了很多人写的太极图案，自己也来搞一下

牛刀小试，献丑献丑~

1

最新

发表评论全部评论

暂时没有评论！

iemel1

2019/7/11 18:34:04

这个叫太极图，不叫八卦回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

xsyxsyxsy

相关代码

canvas实现太极图

最新