HTML5教程编程实战之H5时钟-职坐标

HTML5教程编程实战之H5时钟

等等 2018-03-12 来源：网络阅读 1393 评论 0

摘要：本篇HTML5教程将讲解H5时钟的编写，看完这篇文章会让你对怎么制作H5时钟更加清晰的理解和实战。

本篇HTML5教程将讲解H5时钟的编写，看完这篇文章会让你对怎么制作H5时钟更加清晰的理解和实战。

本文主要用到的知识

　　1、Canvas

　　2、三角函数

　　3、JavaScript

源代码

<!DOCTYPE html><html><head>

<title>超酷HTML5时钟(作者：//www.cnblogs.com/jscode/)</title>

.time {

text-align: center;

width:400px;

font-family: "Book Antiqua",Palatino,serif;

font-size: 40px;

font-weight: bold;

text-shadow: 1px 1px 3px #333;

position:absolute;

}

.time em {

background: white;

position: absolute;

top: 5px;

left: 130px;

height: 18px;

width: 140px;

opacity: 0.4;

}

</style>

var canvas, context;

function DrawClock() {

canvas = document.getElementById("canvas");

context = canvas.getContext("2d");

setInterval("drawbackground()", 1000);

}

function drawbackground() {

var radius = Math.min(canvas.width / 2, canvas.height / 2) - 15;

var centerx = canvas.width / 2;

var centery = canvas.height / 2;

context.clearRect(0, 0, canvas.width, canvas.height);

context.save();

context.lineWidth = 15;

context.fillStyle = "#EFEFEF";

context.strokeStyle = "#000";

context.beginPath();

context.arc(centerx, centery, radius, 0, Math.PI * 2, 0);

context.fill();

context.stroke();

context.closePath();

context.restore();

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

context.save();

context.fillStyle = "#EFEFEF";

context.strokeStyle = "#000";

if (i % 5 == 0) {

context.lineWidth = 3;

}

context.beginPath();

context.moveTo(centerx, centery);

context.lineTo(centerx + (radius-6) * Math.cos(i * 6 * Math.PI / 180), centery - (radius-5) * Math.sin(i * 6 * Math.PI / 180));

context.fill();

context.stroke();

context.closePath();

context.restore();

}

context.moveTo(centerx, centery);

context.save();

context.fillStyle = "#EFEFEF";

context.strokeStyle = "#EFEFEF";

context.beginPath();

context.arc(centerx, centery, radius-15, 0, Math.PI * 2, 0);

context.fill();

context.stroke();

context.closePath();

context.restore();

var r = radius - 25;

context.font = "bold 20px 宋体";

Drawtext("1", centerx + (Math.cos(60 * Math.PI / 180) * r), centery - (Math.sin(60 * Math.PI / 180) * r));

Drawtext("2", centerx + (Math.cos(30 * Math.PI / 180) * r), centery - (Math.sin(30 * Math.PI / 180) * r));

Drawtext("3", centerx + (Math.cos(0 * Math.PI / 180) * r), centery - (Math.sin(0 * Math.PI / 180) * r));

Drawtext("4", centerx + (Math.cos(330 * Math.PI / 180) * r), centery - (Math.sin(330 * Math.PI / 180) * r));

Drawtext("5", centerx + (Math.cos(300 * Math.PI / 180) * r), centery - (Math.sin(300 * Math.PI / 180) * r));

Drawtext("6", centerx + (Math.cos(270 * Math.PI / 180) * r), centery - (Math.sin(270 * Math.PI / 180) * r));

Drawtext("7", centerx + (Math.cos(240 * Math.PI / 180) * r), centery - (Math.sin(240 * Math.PI / 180) * r));

Drawtext("8", centerx + (Math.cos(210 * Math.PI / 180) * r), centery - (Math.sin(210 * Math.PI / 180) * r));

Drawtext("9", centerx + (Math.cos(180 * Math.PI / 180) * r), centery - (Math.sin(180 * Math.PI / 180) * r));

Drawtext("10", centerx + (Math.cos(150 * Math.PI / 180) * r), centery - (Math.sin(150 * Math.PI / 180) * r));

Drawtext("11", centerx + (Math.cos(120 * Math.PI / 180) * r), centery - (Math.sin(120 * Math.PI / 180) * r));

Drawtext("12", centerx + (Math.cos(90 * Math.PI / 180) * r), centery - (Math.sin(90 * Math.PI / 180) * r));

context.save();

context.fillStyle="black";

context.beginPath();

context.arc(centerx,centery,10,0,Math.PI*2,0);

context.fill();

context.stroke();

context.closePath();

context.restore();

drawpoint(centerx, centery, radius);

}

function drawpoint(centerx, centery, radius) {

var date = new Date();

var h = date.getHours();

h = h < 13 ? h : h - 12;

var m = date.getMinutes();

var s = date.getSeconds();

var th = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();

var tm = m < 10 ? "0" + m : m;

var ts = s < 10 ? "0" + s : s;

document.getElementById("currtime").innerHTML = th + ":" + tm + ":" + ts;

var hr = h * 30 * Math.PI / 180 + (m / 60) * 30 * Math.PI / 180 + 90 * Math.PI / 180;

var mr = m * 6 * Math.PI / 180 + s / 60 * 6 * Math.PI / 180 + 90 * Math.PI / 180;

var sr = s * 6 * Math.PI / 180 + 90 * Math.PI / 180;

context.save();

context.lineWidth = 5;

context.fillStyle = "darkgray";

context.strokeStyle = "black";

context.beginPath();

context.moveTo(centerx + 20 * Math.cos(hr), centery + 20 * Math.sin(hr));

context.lineTo(centerx - (radius - 120) * Math.cos(hr), centery - (radius - 120) * Math.sin(hr));

context.moveTo(centerx + 20 * Math.cos(mr), centery + 20 * Math.sin(mr));

context.lineTo(centerx - (radius - 80) * Math.cos(mr), centery - (radius - 80) * Math.sin(mr));

context.moveTo(centerx + 20 * Math.cos(sr), centery + 20 * Math.sin(sr));

context.lineTo(centerx - (radius - 50) * Math.cos(sr), centery - (radius - 50) * Math.sin(sr));

context.closePath();

context.fill();

context.stroke();

context.restore();

}

function Drawtext(text, x, y) {

context.save();

x -= (context.measureText(text).width / 2);

y += 9;

context.beginPath();

context.translate(x, y);

context.fillText(text, 0, 0);

context.restore();

}

window.onload = DrawClock;

</script></head><body>

<h1>超酷HTML5时钟(作者：//www.cnblogs.com/jscode/)</h1>

方法作用解释：

DrawClock方法取得Canvas上下文

drawbackground 方法主要是画时钟的背景部分：边框、文字、刻度线

drawpoint 方法用来画时、分、秒线

Drawtext 方法是添加文字的

希望这篇文章可以帮助到你。总之，同学们，你想要的职坐标IT频道都能找到！

web前端开发基础知识 google前端编码规范 web前端开发难学吗

本文由 @等等发布于职坐标。未经许可，禁止转载。

喜欢 | 0

不喜欢 | 0

看完这篇文章有何感觉？已经有0人表态，0%的人喜欢快给朋友分享吧~

后参与评论

加入IT交流圈

JAVA工程师交流群 +加入

大数据架构师交流群 +加入

人工智能Python交流群 +加入

WEB/H5前端交流群 +加入

WEB前端 直通车

资料领取
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈

海同专业团队更多>>

黄骈联系TA

认证System Analyst，System Architect

张浩联系TA

15年全栈技术研发经验，中南大学、湖南师大等10+所高校特聘讲师

热门就业技能更多>>

【零基础】人工智能+Python全栈开发技术

HTML5/CSS330天热搜词更多>>

html5+css3从入门到精通源码精通html5和css3 html5css3教程下载 html5+css3从入门到精通pdf html5经典实例 html5+css3从入门到精通如何 html5css3从入门到精通视频教程 html5 css3入门 html5 css3入门到精通 html5css3教程 html5教程技巧 html5零基础教程 html5+css3 html5可以做什么 html5+css3从入门到精通下载 html5从入门到精通来自微博html5版是什么 html5教程当当 html5从入门到精通pdf html5个人简历模板