89canvas制作时钟

这是用HTML5的canvas制作的一个钟表，包含表盘、时针、分针、秒针及它们的运动；另外还添加了自动读时间的功能。```html:run<!doctype html><html><head>    <style>        #clock{            display:block;            background:url("") no-repeat;            margin: 0 auto;        }    </style></head><body><canvas id="clock" width="500" height="500" >    您的浏览器不支持canvas标签，无法看到时钟</canvas><script>    var clock=document.getElementById('clock');    var context=clock.getContext('2d');    function drawClock() {        context.clearRect(0, 0, 500, 500);        function tow(n) {            return n >= 0 && n < 10 ? '0' + n : '' + n;        }        var now = new Date();        var second = now.getSeconds();        var minute = now.getMinutes();        var hour = now.getHours();        var date = now.getDate();        var month = now.getMonth()+1;        var year = now.getFullYear();        hour = hour + minute / 60;        var hour1=hour;        hour = hour > 12 ? hour - 12 : hour;        //制作时钟外圈        context.lineWidth = 10;        context.beginPath();        context.arc(250, 270, 200, 0, 360, false);        context.stroke();        context.closePath();       //小时刻度制作        for (i = 0; i < 12; i++) {            context.save();            context.lineWidth = 9;            context.strokeStyle = "red";            context.translate(250, 270);            context.rotate(i * 30 * Math.PI / 180);            context.beginPath();            context.moveTo(0, -170);            context.lineTo(0, -190);            context.stroke();            context.closePath();            context.restore();        }        //分钟刻度制作        for ( i = 0; i < 60; i++) {            context.save();            context.lineWidth = 5;            context.strokeStyle = "blue";            context.translate(250, 270);            context.rotate(i * 6 * Math.PI / 180);            context.beginPath();            context.moveTo(0, -180);            context.lineTo(0, -190);            context.stroke();            context.closePath();            context.restore();        }        //钟面上表示小时的数字        for (var i = 1; i < 13; i++) {            context.save();            var deg = i * Math.PI / 6;            context.translate(250, 270);            var x = Math.sin(deg);            var y = -Math.cos(deg);            context.fillStyle = "block";            context.font = "25px 宋体";            context.textAlign = "center";            context.textBaseline = "middle";            context.lineWidth=1;            context.strokeStyle="white";            context.beginPath();            context.strokeText(i, x * 155, y * 155);            context.closePath();            context.restore();        }        //时针制作        context.save();        context.lineWidth=7;        context.strokeStyle="#000";        context.translate(250,270);        context.rotate(hour*30*Math.PI/180);        context.beginPath();        context.moveTo(0,-110);        context.lineTo(0,10);        context.stroke();        context.closePath();        context.restore();        //分针制作        context.save();        context.lineWidth=5;        context.strokeStyle="#000";        context.translate(250,270);        context.rotate(minute*6*Math.PI/180);        context.beginPath();        context.moveTo(0,-135);        context.lineTo(0,15);        context.stroke();        context.closePath();        context.restore();        //秒针制作        context.save();//保存当前环境；        //以下是秒针的主体        context.strokeStyle="red";        context.lineWidth=3;        context.translate(250,270);        context.rotate(second*6*Math.PI/180);//秒针旋转的速度        context.beginPath();        context.moveTo(0,-170);        context.lineTo(0,20);        context.stroke();               context.closePath();        //以上是秒针的主体，以下是时针、分针、秒针的交叉点        context.beginPath();        context.arc(0,0,5,0,360,false);        context.closePath();        context.fillStyle="gray";        context.fill();        context.stroke();        //以上是时针、分针、秒针的交叉点，以下是秒针的顶端装饰。        context.beginPath();        context.arc(0,-150,5,0,360,false);        context.closePath();        context.fillStyle="gray";        context.fill();        context.stroke();        context.restore();//返回已保存过的环境。        //以下是文字报时；        context.save();        context.font="23px 楷体";        context.lineWidth=1;        context.strokeStyle="white";        context.strokeText("现在是北京时间:"+tow(year)+"年"+tow(month)+"月"+tow(date)+"日 "                +tow(Math.floor(hour1))+"时"+tow(minute)+"分"+tow(second)+"秒",5,30);        context.restore();    }    drawClock();    setInterval(drawClock,1000);</script></body></html>```

转载于:https://www.cnblogs.com/gushixianqiancheng/p/10967141.html

89canvas制作时钟相关推荐

运用计算机来动画制作的视频,如何制作一个时钟转动动画视频?电脑制作动画的软件制作时钟转动的小视频的方法...
今天小编要来介绍的是制作动画的软件,可以用于制作时钟转动的动画效果,之前小编就介绍过时钟动画制作的方法,但今天的方法更先进哦,这里的时钟的样式还有颜色都可以自定义的哦.制作动画的软件是什么?不是手机自 ...
如何用iframe标签以及Javascript制作时钟？
如何利用iframe标签以及Javascript制作时钟? 如何制作一个时钟呢?效果如下图所示: 这里的时钟会不停的走,但是下面的页面是不会变得,这样就实现了我们想要的效果了.下面我将分为以下几个方面 ...
计算机动画制作简单动画视频教程,如何制作一个时钟转动动画视频?电脑制作动画的软件制作时钟转动的小视频的方法...
今天小编要来介绍的是制作动画的软件,可以用于制作时钟转动的动画效果,之前小编就介绍过时钟动画制作的方法,但今天的方法更先进哦,这里的时钟的样式还有颜色都可以自定义的哦.制作动画的软件是什么?不是手机自 ...
DS1302 中文资料+代码单片机制作时钟
DS1302 中文资料 DS1302 是 DALLAS 公司推出的涓流充电时钟芯片内含有一个实时时钟/日历和 31 字节静态 RAM 可通过简单的串行接口与单片机进行通信可提供: --秒分时日日期 ...
Arduino UNO DS3231高精度RTC芯片制作时钟
DS3231 模块是一个时钟模块,上面包含一个纽扣电池位置,可以在主机断电的情况下还可以继续计算时间,以便以后记录使用. 模块参数: 1.尺寸:38mm(长)*22mm(宽)*14mm(高) ...
canvas制作时钟
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
神码ai人工智能写作机器人_机器学习简介part1与人工智能的比较
神码ai人工智能写作机器人 https://www.eastwestbank.com/ReachFurther/en/News/)https://www.eastwestbank.com/ReachF ...
使用 FlipClock.js 制作精美的时钟、定时器和倒计时功能
FlipClock.js 被创建出来是因为其他的解决方案不够抽象,不能够在不重写的代码的情况下提供了深层次的自定义.有些库的参数过多,而另外一些则是脚本中的硬编码太多,不够灵活. 在参考许多现有的解决 ...
html插入flash时钟,教你利用Flash制作一个会走动的时钟（时针，分针，秒针）
其实制作时钟的方法很多,在此小编利用Flash也制作一个时钟,就当是学习CS3语言的编程技巧吧.下面是具体的实现步骤. 工具/原料 Adobe Flash CS3 方法/步骤 1.新建一Flash文档 ...

89canvas制作时钟

89canvas制作时钟相关推荐

最新文章

热门文章