看到了很多人寫的太極圖案，自己也來搞一下，今天就來介紹一下
css樣式代碼
.animation{ width: 800px; height: 800px; border: 1px solid #000;}#canvas{ animation: rotate 6s linear infinite; }/* 給太極圖設置旋轉動畫 */@keyframes rotate{ 0%{ transform: none; } 100%{ transform: rotate(360deg); }}javascript代碼
//文檔加載完畢后執行函數window.onload = function(){ //獲取畫布對象 var canvas = document.getElementById('canvas'); //獲取上下文對象 var context = canvas.getContext('2d'); //圓開始路徑 context.beginPath(); //繪制最外層的大圓(黑色) context.arc(400, 400, 300, Math.PI / 180 * 0, Math.PI / 180 * 360); //將大圓填充為黑色 context.fillStyle = '#000'; context.fill(); //繪制左半圓(白色) context.beginPath(); context.arc(400, 400, 300, Math.PI / 180 * 90, Math.PI / 180 * 270); context.fillStyle = '#fff'; context.fill(); //繪制右半圓(黑色)，會覆蓋外層大圓，顏色一樣。所以寫不寫都可以 /* context.beginPath(); context.arc(400, 400, 300, Math.PI / 180 * 270, Math.PI / 180 * 90); context.fillStyle = '#000'; context.fill(); */ //繪制左上半圓(黑色) context.beginPath(); context.arc(400, 250, 150, Math.PI / 180 * 90, Math.PI / 180 * 270); context.fillStyle = '#000'; context.fill(); //繪制右下半圓(白色) context.beginPath(); context.arc(400, 550, 150, Math.PI / 180 * 270, Math.PI / 180 * 90); context.fillStyle = '#fff'; context.fill(); //繪制左上小半圓(白色) context.beginPath(); context.arc(400, 250, 35, Math.PI / 180 * 0, Math.PI / 180 * 360); context.fillStyle = '#fff'; context.fill(); //繪制右下小半圓(黑色) context.beginPath(); context.arc(400, 550, 35, Math.PI / 180 * 0, Math.PI / 180 * 360); context.fillStyle = '#000'; context.fill(); }html代碼
<div class="animation"> <canvas id="canvas" width="800" height="800"></canvas> </div>
設置動畫之后的太極圖效果
到此這篇關于canvas繪制太極圖的實現示例的文章就介紹到這了,更多相關canvas太極圖內容請搜索武林網以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持武林網！
新聞熱點
疑難解答
