未加星标

JS+Canvas绘制动态时钟效果

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 | 作者 红领巾 ] 0人收藏点击收藏
本文实例为大家分享了Canvas绘制动态时钟效果展示的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#mycanvas{
position: absolute;
left:50%;
margin-left:-250px;
border:5px solid #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
background-color: rgb(58, 179, 255);
}
</style>
</head>
<body>
<!--
canvas:html5新增的画布对象,可以在其中绘制任何的图形,以及线条效果,包括图片
注意canvas的尺寸应该通过元素的属性直接设置,而不是使用样式实现(失帧)
-->
<canvas id="mycanvas" width="500px" height="500px">您的浏览器太low了,请切换</canvas>
<script>
//获取画布对象
var mycanvas = document.getElementById('mycanvas');
//获取一个2d绘图环境(拿到一支画笔)
var ctx = mycanvas.getContext('2d');

function draw(){

//获取系统时间
var nowTime = new Date();
var hours = nowTime.getHours();//获取时
var minutes = nowTime.getMinutes();//获取分
var seconds = nowTime.getSeconds();//获取秒

//防止小时超过12
hours = hours > 12 ? hours-12 : hours;
//精准设置小时值
hours = hours + minutes/60;

//清除画布(防止覆盖)
ctx.clearRect(0,0,500,500);

//初始化画笔的样式
ctx.lineWidth = 5; //设置线条的宽度
ctx.strokeStyle = '#fff'; //设置线条颜色

ctx.beginPath();//开始新的绘图路径
//设置一个圆形路径
ctx.arc(250,250,150,0,360,false);
//绘制图形
ctx.stroke();
ctx.closePath();//结束当前绘图路径

//绘制刻度(时刻度)
for(var i = 0;i < 12;i++){
ctx.beginPath();
ctx.lineWidth = 10;
//保存当前绘图环境
ctx.save();
//重置绘制起始位置(将圆心位置重置为0,0)
ctx.translate(250,250);
//旋转画布到一定的弧度 弧度=角度*PI/180
ctx.rotate(i * 30 * Math.PI / 180);
//设置绘制线条的起始位置
ctx.moveTo(0,140);
//设置线条的结束位置
ctx.lineTo(0,150);
//绘制路径
ctx.stroke();
//还原初始的绘图环境
ctx.restore();
ctx.closePath();
}

//绘制刻度(分刻度)
for(var i = 0;i < 60;i++){
ctx.beginPath();
ctx.lineWidth = 3;
//保存当前绘图环境
ctx.save();
//重置绘制起始位置(将圆心位置重置为0,0)
ctx.translate(250,250);
//旋转画布到一定的弧度 弧度=角度*PI/180
ctx.rotate(i * 6 * Math.PI / 180);
//设置绘制线条的起始位置
ctx.moveTo(0,142);
//设置线条的结束位置
ctx.lineTo(0,146);
//绘制路径
ctx.stroke();
//还原初始的绘图环境
ctx.restore();
ctx.closePath();
}

/*绘制时针*/
ctx.beginPath();
ctx.lineWidth = 5;
//保存当前绘图环境
ctx.save();
//重置绘制起始位置(将圆心位置重置为0,0)
ctx.translate(250,250);
//旋转画布到一定的弧度 弧度=角度*PI/180
ctx.rotate(hours * 30 * Math.PI / 180);
//设置绘制线条的起始位置
ctx.moveTo(0,10);
//设置线条的结束位置
ctx.lineTo(0,-100);
//绘制路径
ctx.stroke();
//还原初始的绘图环境
ctx.restore();
ctx.closePath();

/*绘制分针*/
ctx.beginPath();
ctx.lineWidth = 3;
//保存当前绘图环境
ctx.save();
//重置绘制起始位置(将圆心位置重置为0,0)
ctx.translate(250,250);
//旋转画布到一定的弧度 弧度=角度*PI/180
ctx.rotate(minutes * 6 * Math.PI / 180);
//设置绘制线条的起始位置
ctx.moveTo(0,10);
//设置线条的结束位置
ctx.lineTo(0,-120);
//绘制路径
ctx.stroke();
//还原初始的绘图环境
ctx.restore();
ctx.closePath();


/*绘制秒针*/
ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = '#f00';
//保存当前绘图环境
ctx.save();
//重置绘制起始位置(将圆心位置重置为0,0)
ctx.translate(250,250);
//旋转画布到一定的弧度 弧度=角度*PI/180
ctx.rotate(seconds * 6 * Math.PI / 180);
//设置绘制线条的起始位置
ctx.moveTo(0,10);
//设置线条的结束位置
ctx.lineTo(0,-135);
//绘制路径
ctx.stroke();
//还原初始的绘图环境
ctx.restore();
ctx.closePath();
}

setInterval(draw,1000);

</script>
</body>
</html>

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

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 浏览器360
分页:12
转载请注明
本文标题:JS+Canvas绘制动态时钟效果
本站链接:http://www.codesec.net/view/568387.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(15)