HTML5場景簡單源代碼
<!DOCTYPE html> <html> <head> <title>HTML5場景</title> </head> <body> <canvas id="myCanvas"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); //繪制背景 ctx.fillStyle = "#008080"; ctx.fillRect(0, 0, canvas.width, canvas.height); //繪制山 ctx.fillStyle = "#32CD32"; ctx.beginPath(); ctx.moveTo(0, canvas.height - 100); ctx.lineTo(canvas.width / 2, canvas.height / 2); ctx.lineTo(canvas.width, canvas.height - 100); ctx.closePath(); ctx.fill(); //繪制太陽 ctx.fillStyle = "#FFD700"; ctx.beginPath(); ctx.arc(100, 100, 50, 0, Math.PI * 2, true); ctx.closePath(); ctx.fill(); //繪制樹 ctx.fillStyle = "#8B4513"; ctx.fillRect(canvas.width - 200, canvas.height - 150, 50, 150); ctx.beginPath(); ctx.arc(canvas.width - 175, canvas.height - 200, 100, Math.PI * 2 / 3, Math.PI * 4 / 3, false); ctx.closePath(); ctx.fill(); </script> </body> </html>
以上是HTML5場景的簡單源代碼,使用canvas元素和2D繪圖API繪制了一幅太陽、樹和山的場景。