• 售前

  • 售后

热门帖子
入门百科

利用纯HTML5编写一款网页上的时钟的代码分享

[复制链接]
准藏智虽 显示全部楼层 发表于 2021-10-26 13:13:50 |阅读模式 打印 上一主题 下一主题
你必要知道的:
canvas标签只是图形容器,您必须利用脚原来绘制图形。默认巨细:宽300px,高150px;
getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。——获取上下文对象。
getContext("2d") 对象属性和方法,可用于在画布上绘制文本、线条、矩形、圆形等等。
fillRect(l,t,w,h):默认颜色是玄色 strokeRect(l,t,w,h):带边框的方块。默认一像素玄色边框
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
beginPath():界说开始绘制路径, 它把当前的点设置为 (0,0)。 当一个画布的情况第一次创建,beginPath()
方法会被显式地调用。
closePath():结束绘制路径(将起点与尽头举行连接)

绘制圆形:
arc( x,y,半径,起始弧度,结束弧度,旋转方向)
x,y:起始位置
弧度与角度的关系:弧度=角度*Math.PI/180
旋转方向:顺时针(默认:false,逆时针:true)
代码:
XML/HTML Code复制内容到剪贴板
       
  • <!DOCTYPE HTML>      
  • <html lang="en-US">      
  • <head>      
  •         <meta charset="UTF-8">      
  •         <title></title>      
  •         <script>      
  •                 window.onload = function(){      
  •                         var oC = document.getElementById('ch1');      
  •                         var oGC = oC.getContext('2d');      
  •       
  •                         function drawClock(){      
  •                                 var x = 200;   //指定坐标      
  •                                 var y = 200;      
  •                                 var r = 150;  //指定钟表半径      
  •       
  •                                 oGC.clearRect(0,0,oC.width,oC.height);//清空画布      
  •       
  •                                 var oDate = new Date();      //创建日期对象      
  •                                 var oHours = oDate.getHours();//获取时间      
  •                                 var oMin = oDate.getMinutes();      
  •                                 var oSen = oDate.getSeconds();      
  •       
  •                                 var oHoursValue = (-90 + oHours*30 + oMin/2)*Math.PI/180; //设置时针的值      
  •                                 var oMinValue = (-90 + oMin*6)*Math.PI/180;      
  •                                 var oSenValue = (-90 + oSen*6)*Math.PI/180;      
  •       
  •                                 oGC.beginPath();//开始      
  •       
  •                                 for(var i=0;i<60;i++){         //i为60,代表着时钟的60个小刻度      
  •                                         oGC.moveTo(x,y);      
  •                                         oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false); //循环从6度到12度      
  •                                 }      
  •                                 oGC.closePath();      
  •                                 oGC.stroke();      
  •       
  •                                 oGC.fillStyle ='white'; //覆盖住小刻度的玄色线      
  •                                 oGC.beginPath();      
  •                                 oGC.moveTo(x,y);      
  •                                 oGC.arc(x,y,r*19/20,0,360*(i+1)*Math.PI/180,false);      
  •       
  •                                 oGC.closePath();//结束      
  •                                 oGC.fill();      
  •       
  •                                 oGC.lineWidth = 3; //设置时钟圆盘大刻度的粗细值      
  •                                 oGC.beginPath();  //开始画大的时钟刻度      
  •       
  •                                 for(i=0;i<12;i++){              //i为12,代表着时钟刻度的12大格      
  •                                         oGC.moveTo(x,y);      
  •                                         oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false); // 隔断为30度,弧度=角度*Math.PI/180      
  •                                 }      
  •                                 oGC.closePath();      
  •                                 oGC.stroke();      
  •       
  •                                 oGC.fillStyle ='white'; //覆盖住大刻度的玄色线      
  •                                 oGC.beginPath();      
  •                                 oGC.moveTo(x,y);      
  •                                 oGC.arc(x,y,r*18/20,360*(i+1)*Math.PI/180,false);      
  •       
  •                                 oGC.closePath();      
  •                                 oGC.fill();//表盘完成        
  •       
  •                                 oGC.lineWidth = 5;//设置时针宽度      
  •                                 oGC.beginPath();//开始绘制时针      
  •                                 oGC.moveTo(x,y);      
  •       
  •                                 oGC.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);//设置时针巨细和弧度      
  •                                 oGC.closePath();      
  •                                 oGC.stroke();      
  •       
  •                                 oGC.lineWidth = 3;//设置分针宽度      
  •                                 oGC.beginPath();//开始绘制分针      
  •                                 oGC.moveTo(x,y);      
  •       
  •                                 oGC.arc(x,y,r*14/20,oMinValue,oMinValue,false);//设置分针巨细和弧度      
  •                                 oGC.closePath();      
  •                                 oGC.stroke();      
  •       
  •                                 oGC.lineWidth = 1;//设置秒针宽度      
  •                                 oGC.beginPath();//开始绘制秒针      
  •                                 oGC.moveTo(x,y);      
  •       
  •                                 oGC.arc(x,y,r*19/20,oSenValue,oSenValue,false);//设置秒针巨细和弧度      
  •                                 oGC.closePath();      
  •                                 oGC.stroke();      
  •                         }      
  •                         setInterval(drawClock,1000);//设置定时器,让时钟运转起来      
  •                                 drawClock();      
  •                 };      
  •         </script>      
  • </head>      
  • <body>      
  •         <canvas id = "ch1" width = "400px" height = "400px"></canvas>      
  • </body>      
  • </html>  
点击下方result检察演示:
http://jsfiddle.net/eh02450b/2/

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作