首页 > 代码库 > H TML5 之 (3)转动的圆球
H TML5 之 (3)转动的圆球
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>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。