html5画布太极图 canvas实现太极图

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();

};