HTML5是一種優秀的前端技術,能夠實現很多有趣的效果,比如太極圖。下面簡單介紹如何通過代碼實現一個太極圖:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>太極圖</title> <style> #canvas { border: 1px solid #000; } </style> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); // 畫圓函數 function circle(x, y, r, color) { context.beginPath(); context.arc(x, y, r, 0, Math.PI * 2, false); context.fillStyle = color; context.fill(); } // 畫半圓函數 function halfCircle(x, y, r, color, direction) { context.beginPath(); context.arc(x, y, r, Math.PI * direction, Math.PI * (1 + direction), false); context.lineTo(x, y); context.fillStyle = color; context.fill(); } // 繪制太極圖 var centerX = 200; var centerY = 200; var radius = 100; circle(centerX, centerY, radius, '#000'); halfCircle(centerX, centerY, radius, '#fff', 1); halfCircle(centerX, centerY, radius, '#000', 0); circle(centerX, centerY - radius / 2, radius / 10, '#fff'); circle(centerX, centerY + radius / 2, radius / 10, '#000'); </script> </body> </html>
以上是一個簡單的HTML5實現太極圖的代碼。首先,我們用一個canvas標簽來創建一個畫布,通過JS獲取畫布上下文,隨后定義“畫圓”和“畫半圓”兩個函數,分別用來畫整圓和半圓。最后,在繪圖函數里調用這兩個函數,即可得到一個美觀的太極圖。