纯JS+html5新标签canvas绘制与本地时间同步时针

最新推荐文章于 2021-11-10 23:48:54 发布

想旅游咯

最新推荐文章于 2021-11-10 23:48:54 发布

阅读量829

点赞数

分类专栏： web前端

web前端专栏收录该内容

109 篇文章 2 订阅

订阅专栏

<!doctype html>

< html lang = "en" >

< head >

< meta charset = "UTF-8" >

< meta name = "Generator" content = "EditPlus®" >

< meta name = "Author" content = "" >

< meta name = "Keywords" content = "" >

< meta name = "Description" content = "" >

< title >Document </ title >

< style >

body { background: black; }

#c1 { background: white; }

</ style >

< script >

window . onload = function ( ) {

var oc = document . getElementById ( 'c1' ) ; //获取元素

var ogc = oc . getContext ( '2d' ) ; //获取绘图环境

function toDraw ( ) {

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 osec = odate . getSeconds ( ) ; //获取本地时间秒值

var ohoursvalue = ( -90 + ohours * 30 + omin / 2 ) * Math . PI / 180 ; //根据获得的时间值计算出时针的弧度

var ominvalue = ( -90 + omin * 6 ) * Math . PI / 180 ; //根据获得的时间值计算出分针的弧度

var osecvalue = ( -90 + osec * 6 ) * Math . PI / 180 ; //根据获得的时间值计算出秒针的弧度

/*ogc.moveTo(x,y);

ogc.arc(x,y,r,0,6*Math.PI/180,12*Math.PI/180,false);*/

ogc . beginPath ( ) ; //开始绘制一个大圆大圆有for循环实现60次的6弧度圆弧

for ( var i = 0 ; i < 60 ; i ++ ) {

ogc . moveTo ( x , y ) ; //每次移动到大圆中心点

ogc . arc ( x , y , r , 6 * i * Math . PI / 180 , 6 * ( i +1 ) * Math . PI / 180 , false ) ;

}

ogc . closePath ( ) ; //60次绘制后结束绘制如图1

ogc . stroke ( ) ; //结束绘制

ogc . fillStyle = "white" ; //填充为白色的半径为原来19/20的圆如图2

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 = "4" ;

ogc . beginPath ( ) ; //开始绘制一个大圆大圆有for循环实现12次的30弧度圆弧

for ( var i = 0 ; i < 12 ; i ++ ) {

ogc . moveTo ( x , y ) ; //每次移动到大圆中心点

ogc . arc ( x , y , r , 30 * i * Math . PI / 180 , 30 * ( i +1 ) * Math . PI / 180 , false ) ;

}

ogc . closePath ( ) ; //12次绘制后结束绘制如图3

ogc . stroke ( ) ;

ogc . fillStyle = "white" ; //填充为白色的半径为原来19/20的圆如图4

ogc . beginPath ( ) ;

ogc . moveTo ( x , y ) ;

ogc . arc ( x , y , r * 18 / 20 , 0 , 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 ) ; //绘制时针由变量oohoursvalue动态的绘制出时针的位置不断的变动

ogc . closePath ( ) ; //

ogc . stroke ( ) ;

ogc . lineWidth = "3" ;

ogc . beginPath ( ) ;

ogc . moveTo ( x , y ) ;

ogc . arc ( x , y , r * 14 / 20 , ominvalue , ominvalue , false ) ; //绘制分针由变量ominvalue动态的绘制出分针的位置不断的变动

ogc . closePath ( ) ; //

ogc . stroke ( ) ;

ogc . lineWidth = "1" ;

ogc . beginPath ( ) ;

ogc . moveTo ( x , y ) ;

ogc . arc ( x , y , r * 19 / 20 , osecvalue , osecvalue , false ) ; //绘制秒针由变量osecvalue动态的绘制出秒针的位置不断的变动

ogc . closePath ( ) ; //

ogc . stroke ( ) ;

}

setInterval ( toDraw , 1000 ) ; //定时器每隔一秒执行toDraw一次对应上面的清除画布一次

toDraw ( ) ; //调用自定义函数

} ;

</ script >

</ head >

< body >

< canvas id = "c1" width = "400" height = "400" > </ canvas >

</ body >

</ html >

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯JS+html5新标签canvas绘制与本地时间同步时针

html lang="en"> head> meta charset="UTF-8"> meta name="Generator" content="EditPlus®"> meta name="Author" content=""> meta name="Keywords" content=""> meta name="Description" content=
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。