HTML5是一種強大的網絡開發語言,它可以實現很多有趣的功能,比如說摩天輪程序。以下是一個簡單的HTML5摩天輪代碼段:
<canvas id="wheel-canvas" width="600" height="600"></canvas> <script> var canvas = document.getElementById("wheel-canvas"); var context = canvas.getContext("2d"); var posX = 300; var posY = 300; var radius = 250; var rotation = 0; var speed = 0.01; var numWedges = 8; var wedgeAngle = (Math.PI*2)/numWedges; function drawWheel(){ context.clearRect(0, 0, canvas.width, canvas.height); context.beginPath(); context.arc(posX, posY, radius, 0, Math.PI*2, false); context.closePath(); context.lineWidth = 10; context.strokeStyle = '#666666'; context.stroke(); for(var i=0; i<numWedges; i++){ context.beginPath(); context.moveTo(posX, posY); context.arc(posX, posY, radius, i*wedgeAngle-rotation, (i+1)*wedgeAngle-rotation, false); context.closePath(); context.fillStyle = '#'+Math.floor(Math.random()*16777215).toString(16); context.fill(); context.lineWidth = 1; context.strokeStyle = '#000000'; context.stroke(); } } function animateWheel(){ rotation += speed; drawWheel(); requestAnimationFrame(animateWheel); } window.onload = function(){ animateWheel(); }; </script>
該代碼段使用HTML5的<canvas>
元素創建一個摩天輪。代碼使用JavaScript和Canvas API繪制圖形和動畫。通過改變speed
變量來改變摩天輪的速度或改變numWedges
變量來增加或減少扇形的數量。
上一篇svg更換顏色 css