首页 > 代码库 > H TML5 之 （3）转动的圆球

H TML5 之 （3）转动的圆球

2024-07-10 22:19:14   224人阅读

HTML5 练手之二，一个能够为之圆心转动的圆球，原理和时钟的非常像，只是要把握转动的时间控制，同时加入了点渐变色

HTML5 练手之二，一个能够为之圆心转动的圆球，原理和时钟的非常像，只是要把握转动的时间控制，同时加入了点渐变色
 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Sun</title> 5 <style> 6 #sun{ 7  background:black; 8 } 9 </style>10 </head>11 <body>12 <canvas id="sun" width="1000" height="1000" >13 您的浏览器不支持标签，无法看到时钟14 </canvas>15 </body>16 <script>17   var clock = document.getElementById("sun");18   var cxt = clock.getContext("2d");19     //生命一个时间函数20     var time = 0;21     function drawEarch(){22   cxt.clearRect(0,0,1000,1000);23   //轨道24   cxt.strokeStyle = "#fff";25   cxt.beginPath();26   cxt.arc(500,500,100,0,360,false);27   cxt.closePath();28   cxt.stroke();29   //太阳30   cxt.beginPath();31   cxt.arc(500,500,20,0,360,false); 32   //设置渐变颜色  33   var suncolor = cxt.createRadialGradient(500,500,0,500,500,20);34   suncolor.addColorStop(0,"#f90");35   suncolor.addColorStop(1,"red");36   cxt.fillStyle = suncolor;37   cxt.fill();38   cxt.closePath(); 39   //地球40      //开启异次元空间41       cxt.save();42       cxt.beginPath();43       cxt.lineWidth = 10;44       cxt.strokeStyle="#f90";45       //设置原点46       cxt.translate(500,500);47       //设置旋转角度48       cxt.rotate(time*365/360*Math.PI/180);49       cxt.arc(0,-100,10,0,360,false);50       var earchcolor = cxt.createRadialGradient(0,-100,0,0,-100,10);51       earchcolor.addColorStop(0,"#78B1E8");52       earchcolor.addColorStop(1,"#050C12");53       cxt.fillStyle = earchcolor;54       cxt.closePath();55       cxt.fill();      56       cxt.restore();57      time +=1;58     }  59   60 61         drawEarch;62       setInterval(drawEarch,10);75  </script>76 </html>






























        

            
                
                  
                
                

                    联系

                    我们