首页 网络编程 前端制作 数据库 CMS教程 脚本编程 微信开发 小程序开发 服务器

html5

热门: ASP.NET PHP编程 ASP编程 JSP编程

会走动的图形html5时钟示例

来源:未知 发布时间:2017-05-13
点评:这篇文章主要介绍了会走动的图形html5时钟示例,需要的朋友可以参考下

使用HTML5制作时钟rbNHTML5中文学习网 - HTML5先行者学习网
rbNHTML5中文学习网 - HTML5先行者学习网
rbNHTML5中文学习网 - HTML5先行者学习网


复制代码代码如下:rbNHTML5中文学习网 - HTML5先行者学习网
<!DOCTYPE html>rbNHTML5中文学习网 - HTML5先行者学习网
<html>rbNHTML5中文学习网 - HTML5先行者学习网
<head>rbNHTML5中文学习网 - HTML5先行者学习网
<title>html5时钟</title>rbNHTML5中文学习网 - HTML5先行者学习网
</head>rbNHTML5中文学习网 - HTML5先行者学习网
<body>rbNHTML5中文学习网 - HTML5先行者学习网
<canvas id = "canvas"></canvas></p><p> <script>rbNHTML5中文学习网 - HTML5先行者学习网
var Clock = function (canvas, options) {rbNHTML5中文学习网 - HTML5先行者学习网
this.canvas = canvas;rbNHTML5中文学习网 - HTML5先行者学习网
this.ctx = this.canvas.getContext("2d");rbNHTML5中文学习网 - HTML5先行者学习网
this.options = options;rbNHTML5中文学习网 - HTML5先行者学习网
};</p><p> Clock.prototype = {rbNHTML5中文学习网 - HTML5先行者学习网
constructor: Clock,rbNHTML5中文学习网 - HTML5先行者学习网
drawCircle: function () {rbNHTML5中文学习网 - HTML5先行者学习网
var ctx = this.ctx;rbNHTML5中文学习网 - HTML5先行者学习网
ctx.strokeStyle = "black";rbNHTML5中文学习网 - HTML5先行者学习网
ctx.arc(this.canvas.width / 2, this.canvas.height / 2, 50, 0, 2 * Math.PI, false);rbNHTML5中文学习网 - HTML5先行者学习网
ctx.stroke();rbNHTML5中文学习网 - HTML5先行者学习网
},rbNHTML5中文学习网 - HTML5先行者学习网
drawNum: function () {rbNHTML5中文学习网 - HTML5先行者学习网
var ctx = this.ctx;rbNHTML5中文学习网 - HTML5先行者学习网
var angle = Math.PI * 2 / 12;rbNHTML5中文学习网 - HTML5先行者学习网
for (var i = 1; i <= 12; i += 1) {rbNHTML5中文学习网 - HTML5先行者学习网
ctx.font = "20px Georgia";rbNHTML5中文学习网 - HTML5先行者学习网
ctx.textAlign = "center";rbNHTML5中文学习网 - HTML5先行者学习网
ctx.textBaseline = 'middle';rbNHTML5中文学习网 - HTML5先行者学习网
ctx.fillText(String(i), this.canvas.width / 2 + Math.cos(3 *Math.PI / 2 + angle * i) * 40, this.canvas.height / 2 + Math.sin(3 * Math.PI / 2 + angle * i) * 40);rbNHTML5中文学习网 - HTML5先行者学习网
}rbNHTML5中文学习网 - HTML5先行者学习网
},rbNHTML5中文学习网 - HTML5先行者学习网
drawPointer: function () {rbNHTML5中文学习网 - HTML5先行者学习网
var ctx = this.ctx;rbNHTML5中文学习网 - HTML5先行者学习网
var that = this;rbNHTML5中文学习网 - HTML5先行者学习网
var date, hour, minute, second;rbNHTML5中文学习网 - HTML5先行者学习网
date = new Date();rbNHTML5中文学习网 - HTML5先行者学习网
hour = date.getHours();rbNHTML5中文学习网 - HTML5先行者学习网
if (hour > 12) {rbNHTML5中文学习网 - HTML5先行者学习网
hour = hour % 12;rbNHTML5中文学习网 - HTML5先行者学习网
}rbNHTML5中文学习网 - HTML5先行者学习网
minute = date.getMinutes();rbNHTML5中文学习网 - HTML5先行者学习网
second = date.getSeconds();</p><p> var b = minute * Math.PI / 30;rbNHTML5中文学习网 - HTML5先行者学习网
var c = second * Math.PI / 30;rbNHTML5中文学习网 - HTML5先行者学习网
var a = hour * Math.PI / 6 + Math.PI / 6 * minute / 60;rbNHTML5中文学习网 - HTML5先行者学习网
var minuteAngle = Math.PI * 2 / 3600;rbNHTML5中文学习网 - HTML5先行者学习网
var secondAngle = Math.PI * 2 / 60;rbNHTML5中文学习网 - HTML5先行者学习网
var hourAngle = Math.PI * 2 / 12 / 3600;</p><p> ctx.beginPath();rbNHTML5中文学习网 - HTML5先行者学习网
ctx.save();rbNHTML5中文学习网 - HTML5先行者学习网
ctx.translate(that.canvas.width / 2, that.canvas.height / 2);rbNHTML5中文学习网 - HTML5先行者学习网
ctx.arc(0, 0, 3, 0, 2 * Math.PI, false);rbNHTML5中文学习网 - HTML5先行者学习网
ctx.fill();rbNHTML5中文学习网 - HTML5先行者学习网
ctx.closePath();rbNHTML5中文学习网 - HTML5先行者学习网
ctx.beginPath();rbNHTML5中文学习网 - HTML5先行者学习网
a += hourAngle;rbNHTML5中文学习网 - HTML5先行者学习网
ctx.rotate(a);rbNHTML5中文学习网 - HTML5先行者学习网
ctx.fillRect(-2, -22, 4, 30);rbNHTML5中文学习网 - HTML5先行者学习网
ctx.closePath();rbNHTML5中文学习网 - HTML5先行者学习网
ctx.beginPath();rbNHTML5中文学习网 - HTML5先行者学习网
b += minuteAngle;rbNHTML5中文学习网 - HTML5先行者学习网
ctx.rotate(b - a);rbNHTML5中文学习网 - HTML5先行者学习网
ctx.fillRect(-1.5, -26, 3, 35);rbNHTML5中文学习网 - HTML5先行者学习网
ctx.closePath();rbNHTML5中文学习网 - HTML5先行者学习网
ctx.beginPath();rbNHTML5中文学习网 - HTML5先行者学习网
c += secondAngle;rbNHTML5中文学习网 - HTML5先行者学习网
ctx.rotate(c - b);rbNHTML5中文学习网 - HTML5先行者学习网
ctx.fillRect(-1, -30, 2, 40);rbNHTML5中文学习网 - HTML5先行者学习网
ctx.closePath();rbNHTML5中文学习网 - HTML5先行者学习网
ctx.restore();rbNHTML5中文学习网 - HTML5先行者学习网
},rbNHTML5中文学习网 - HTML5先行者学习网
rePaint: function () {rbNHTML5中文学习网 - HTML5先行者学习网
this.drawPointer();rbNHTML5中文学习网 - HTML5先行者学习网
this.drawCircle();rbNHTML5中文学习网 - HTML5先行者学习网
this.drawNum();rbNHTML5中文学习网 - HTML5先行者学习网
},rbNHTML5中文学习网 - HTML5先行者学习网
tik: function () {rbNHTML5中文学习网 - HTML5先行者学习网
var that = this;rbNHTML5中文学习网 - HTML5先行者学习网
var ctx = this.ctx;rbNHTML5中文学习网 - HTML5先行者学习网
this.rePaint();rbNHTML5中文学习网 - HTML5先行者学习网
window.timer = setInterval(function () {rbNHTML5中文学习网 - HTML5先行者学习网
ctx.clearRect(0, 0, that.canvas.width, that.canvas.height);rbNHTML5中文学习网 - HTML5先行者学习网
that.rePaint();rbNHTML5中文学习网 - HTML5先行者学习网
}, 1000);rbNHTML5中文学习网 - HTML5先行者学习网
}rbNHTML5中文学习网 - HTML5先行者学习网
};</p><p> var options;rbNHTML5中文学习网 - HTML5先行者学习网
var clock = new Clock(document.getElementById("canvas"), options);rbNHTML5中文学习网 - HTML5先行者学习网
clock.tik();rbNHTML5中文学习网 - HTML5先行者学习网
</script>rbNHTML5中文学习网 - HTML5先行者学习网
</body>rbNHTML5中文学习网 - HTML5先行者学习网
</html>rbNHTML5中文学习网 - HTML5先行者学习网
rbNHTML5中文学习网 - HTML5先行者学习网
rbNHTML5中文学习网 - HTML5先行者学习网
保存后使用浏览器运行,可以看到走动的圆形时钟,大家试试看吧rbNHTML5中文学习网 - HTML5先行者学习网

rbNHTML5中文学习网 - HTML5先行者学习网
网络编程 | 前端制作 | 数据库 | CMS教程 | 脚本编程 | 微信开发 | 小程序开发 | 服务器 |

程序员学习网,提供最新的微信开发教程,小程序开发教程,网络编程、php教程、asp.net教程、微信公众平台二次开发教程、脚本编程、网页制作、网页设计、网页特效,为站长与网络编程从业者提供学习资料,凡本网站转载的文章、图片等资料的版权归版权所有人所有,因无法和版权所有者一一联系,如果本网站选取的文/图威胁到您的权益,请您及时和本网站联系。 我们会在第一时间内采取措施,避免给双方造 成不必要的损失。
© 2015-2018 程序员学习网 版权所有,并保留所有权利。

电脑版 | 移动版