国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 開發 > HTML5 > 正文

canvas繪制太極圖的實現示例

2024-09-05 07:23:26
字體:
來源:轉載
供稿:網友

看到了很多人寫的太極圖案,自己也來搞一下,今天就來介紹一下

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太極圖內容請搜索武林網以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持武林網!

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 修武县| 龙山县| 曲沃县| 鱼台县| 凤城市| 宣城市| 德钦县| 深州市| 商丘市| 凤阳县| 南阳市| 原平市| 嘉黎县| 松溪县| 昔阳县| 柘荣县| 上思县| 湖南省| 普宁市| 嫩江县| 通许县| 屯昌县| 仙桃市| 济南市| 盘山县| 盐亭县| 读书| 汝南县| 平利县| 平和县| 镇巴县| 高邑县| 富平县| 聂荣县| 华蓥市| 衡东县| 特克斯县| 汉沽区| 安陆市| 凌海市| 三门县|