JavaScript画布编写炫彩的网页时钟

本文实例为大家分享了Java Script语言画布编写炫彩网页时钟的具体代码，供大家参考，具体内容如下

只是利用了帆布制作的。

示意图如下：

！DOCTYPE html html head meta http-equiv=' Content-Type ' Content=' text/html '；charsert='utf-8'/title网页时钟/title/head dy H2 WeB时钟/H2画布id=' hello '宽度=' 400 '高度=' 400 '样式='边框：1 px纯黑/canvas脚本语言类型=' text/JavaScript ' var myCavas=document。getelementbyid(' hello ')；var c=MyCavas。GetContext(' 2d ')；函数clock() { c.clearRect(0，0，400，400)；//获取当前时间定义变量数据=新日期();//获取秒var sec=数据。getseconds()；//获取分钟var min=数据。getminutes()；//获取小时var hour=数据。gethours()；c .保存()；c .翻译(200，200)；旋转(-数学/2)；//分针刻度线for(var I=0；i 60i ) { //画60个刻度线c . BeginPath()；c.strokeStyle='黄绿色线宽=5;c.moveTo(117，0)；c.lineTo(120，0)；c。中风();//每6度画一个分钟刻度线旋转（数学/30)；c . close path()；} //时钟刻度线for(var I=0；i 12i ) { //画60个刻度线c . BeginPath()；' c.strokeStyle='绿色；线宽=8;c.moveTo(100，0)；c.lineTo(120，0)；c。中风();//每6度画一个分钟刻度线旋转（数学/6)；c . close path()；} //外表盘c . BeginPath()；' c.strokeStyle='粉色；圆弧(0,0,145,0,数学* 2)；线宽=12;c。中风();c . close path()；//画时针小时=12小时？小时-12 :小时；//console.log(小时);c . BeginPath()；c .保存()；//设置旋转角度，参数是弧度，角度0-360 弧度角度*数学/180c旋转（数学。/6 *小时数学。PI/6 *最小值/60数学PI/6 *秒/3600);c.strokeStyle='黄绿色线宽=4;c.moveTo(-20，0)；c.lineTo(50，0)；c。中风();c . restore()；c . close path()；//画分针//console.log(分钟);c . BeginPath()；c .保存()；旋转（数学PI/30 *最小值数学PI/30 *秒/60);c.strokeStyle=' springgreen线宽=3;c.moveTo(-30，0)；c.lineTo(70，0)；c。中风();c . restore()；c . close path()；//画秒针c . BeginPath()；c .保存()；旋转（数学PI/30 *秒);c.strokeStyle='红色线宽=2;c.moveTo(-40，0)；c.lineTo(120，0)；c。中风();c . restore()；c . close path()；c . restore()；} clock()；setInterval(时钟，1000);/脚本/正文/html更多Java脚本语言时钟特效点击查看：JavaScript时钟特效专题

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。