相思资源网 Design By www.200059.com
本文实例为大家分享了JavaScript Canvas编写炫彩网页时钟的具体代码，供大家参考，具体内容如下
只是利用了Canvas制作的。
示意图如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html"; charsert = "utf-8" />
<title> 网页时钟 </title>
</head>
<body>
<h2> Web时钟 </h2>
<canvas id = "hello" width = "400" height = "400"
style = "border:1px solid black"> </canvas>
<script languagetype = "text/javascript">
var myCavas = document.getElementById('hello');
var c = myCavas.getContext('2d');
function clock() {
c.clearRect(0, 0, 400, 400);
//获取当前时间
var data = new Date();
//获取秒
var sec = data.getSeconds();
//获取分钟
var min = data.getMinutes();
//获取小时
var hour = data.getHours();
c.save();
c.translate(200, 200);
c.rotate(-Math.PI/2);
//分针刻度线
for (var i = 0; i < 60; i++) { //画60个刻度线
c.beginPath();
c.strokeStyle = "yellowgreen";
c.lineWidth = 5;
c.moveTo(117, 0);
c.lineTo(120, 0);
c.stroke();
//每6deg画一个分钟刻度线
c.rotate(Math.PI/30);
c.closePath();
}
//时钟刻度线
for (var i = 0; i < 12; i++) { //画60个刻度线
c.beginPath();
c.strokeStyle = "green";
c.lineWidth = 8;
c.moveTo(100, 0);
c.lineTo(120, 0);
c.stroke();
//每6deg画一个分钟刻度线
c.rotate(Math.PI/6);
c.closePath();
}
//外表盘
c.beginPath();
c.strokeStyle = "pink";
c.arc(0, 0, 145, 0, Math.PI*2);
c.lineWidth = 12;
c.stroke();
c.closePath();
//画时针
hour = hour > 12 "yellowgreen";
c.lineWidth = 4;
c.moveTo(-20, 0);
c.lineTo(50, 0);
c.stroke();
c.restore();
c.closePath();
//画分针
//console.log(min);
c.beginPath();
c.save();
c.rotate(Math.PI/30*min + Math.PI/30*sec/60);
c.strokeStyle = "springgreen";
c.lineWidth = 3;
c.moveTo(-30, 0);
c.lineTo(70, 0);
c.stroke();
c.restore();
c.closePath();
//画秒针
c.beginPath();
c.save();
c.rotate(Math.PI/30*sec);
c.strokeStyle = "red";
c.lineWidth = 2;
c.moveTo(-40, 0);
c.lineTo(120, 0);
c.stroke();
c.restore();
c.closePath();
c.restore();
}
clock();
setInterval(clock, 1000);
</script>
</body>
</html>
更多JavaScript时钟特效点击查看：JavaScript时钟特效专题
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
js,Canvas,网页时钟
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无JavaScript Canvas编写炫彩的网页时钟的评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。