HTML5太陽代碼
HTML5太陽是一個很棒的示例，它演示了HTML5 Canvas如何被用來創(chuàng)建一個動態(tài)的圖形對象。在這個示例中，我們將創(chuàng)建一個帶有動畫特效的太陽。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5太陽示例</title>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var radius = 100; // 太陽半徑
var axisTilt = 23.5; // 地球軸傾角
var orbitRadius = 200; // 地球運動半徑
var degree = 0; // 地球旋轉(zhuǎn)角度
var timer = null; // 定時器
function drawSun() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.fillStyle = 'orange';
context.arc(canvas.width / 2, canvas.height / 2, radius, 0, 2 * Math.PI);
context.fill();
}
function drawEarth() {
var earthX = canvas.width / 2 + Math.cos(degree) * orbitRadius;
var earthY = canvas.height / 2 + Math.sin(degree) * orbitRadius * Math.sin(axisTilt * Math.PI / 180);
context.beginPath();
context.fillStyle = 'green';
context.arc(earthX, earthY, radius / 2, 0, 2 * Math.PI);
context.fill();
degree += Math.PI / 180;
}
function render() {
drawSun();
drawEarth();
timer = setTimeout(render, 10);
}
render();
</script>
</body>
</html>在這個代碼中，我們使用了HTML5 Canvas來繪制一個太陽和一個圍繞太陽公轉(zhuǎn)的地球。在render函數(shù)中，我們使用setInterval來定時執(zhí)行drawSun和drawEarth函數(shù)，從而實現(xiàn)太陽和地球的動畫效果。
這個示例是HTML5 Canvas的一個很好的入門例子，讀者可以自己動手修改代碼來實現(xiàn)不同的效果，比如添加月球，或者修改地球公轉(zhuǎn)的軌道半徑和速度等。