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

};

總結

以上是生活随笔為你收集整理的html5画布太极图,canvas实现太极图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。