用canvas绘制一个时钟
实现一个时钟的绘制和时间的显示
一，首先是页面的搭建html部分以及一点点的css代码，因为css这块用的比较少，所以就没有单独出来：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时钟</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
} //显示时间画布
#cav01{
width:600px;
height:150px;
margin:auto;
} //时钟画布
#cav02{
width:420px;
height:420px;
margin:auto;
}
</style>
</head>
<body onload="init()">
<div id="cav01">
<canvas id="canvas01" width="600" height="100" margin=auto></canvas>
</div>
<div id="cav02">
<canvas id="canvas" width="390" height="390" margin=auto></canvas>
</div>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/requestAnimFrame.js"></script>
</body>
</html>
二，绘制时钟的js部分：
这里需要用到两个js文件
1，时钟js：
var can01;
var ctx01;
var can;
var ctx; function init(){
can01=document.getElementById('canvas01');
ctx01=can01.getContext("2d");
can=document.getElementById('canvas');
ctx=can.getContext("2d");
time();
run();
} //时间
function time(){
window.requestAnimFrame(time);
ctx01.clearRect(0,0,600,100); //清除上次的绘画 放在每次绘画之前
shuaxin();
} //循环调用run
function run(){
window.requestAnimFrame(run);
drawbiaopan();
drawkedu();
biaozhen();
} //画表盘
function drawbiaopan(){
//arc(x,y,r,sAngle,eAngle,counterclockwise)
//x,y圆的中心坐标，r圆的半径，sAngle,eAngle圆的起始终点，
//counterclockwise可选，表示画圆逆时针还是顺时针False为顺时针，true为逆时针
ctx.clearRect(20,20,390,390);
ctx.beginPath();
ctx.arc(200,200,180,0,2*Math.PI,false);
ctx.lineWidth=5;
ctx.strokeStyle="微软雅黑";
ctx.stroke();
ctx.closePath();
} //画刻度盘
function drawkedu(){
//时钟
for(var i=0;i<12;i++)
{
ctx.save();
ctx.translate(200,200);
ctx.lineWidth=2;
ctx.strokeStyle="green";
ctx.rotate(i*30*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,-165);
ctx.lineTo(0,-180);
ctx.font="100 14px 宋体";
ctx.textAlign="left";
ctx.textBaseLine="top"; if(i==0){ ctx.strokeText(12,i*(-20)*Math.PI/120,-150);
}else{ ctx.strokeText(i,i*(-20)*Math.PI/120,-150); } ctx.stroke();
ctx.closePath();
ctx.restore();
}
//分钟
for(var i=0;i<60;i++)
{
ctx.save();
ctx.translate(200,200);
ctx.lineWidth=1;
ctx.strokeStyle="green";
ctx.rotate(i*6*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,-170);
ctx.lineTo(0,-180);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
} //画表针
function biaozhen(){
var now=new Date();
var sec=now.getSeconds();
var mins=now.getMinutes();
var hours=now.getHours();
hours=hours+mins/60+sec/3600;
mins=mins+sec/60; //时针
ctx.save();
ctx.translate(200,200);
ctx.lineWidth=3;
ctx.strokeStyle="grey";
ctx.rotate(hours*30*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,-70);//圆心起点
ctx.stroke();
ctx.closePath();
ctx.restore(); //分针
ctx.save();
ctx.translate(200,200);
ctx.lineWidth=2;
ctx.strokeStyle="#000";
ctx.rotate(mins*6*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,0);//起点坐标
ctx.lineTo(0,-105);//终点坐标
ctx.stroke();
ctx.closePath();
ctx.restore(); //秒针
ctx.save();
ctx.translate(200,200);
ctx.lineWidth=1;
ctx.strokeStyle="red";
ctx.rotate(sec*6*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,-130);//圆心起点
ctx.stroke();
ctx.closePath();
ctx.restore();
} function shuaxin(){
var now=new Date();
var sec=now.getSeconds();
var mins=now.getMinutes();
var hours=now.getHours();
ctx01.save();
ctx01.beginPath();
ctx01.fillStyle="red";
ctx01.strokeStyle="red"
ctx01.font="bold 40px 微软雅黑"; //清除上次的时间 //这块代码有点冗余，但是还没有想到有什么好的处理办法，以后再改吧 if(hours<10){
if(mins<10){
if(sec<10){
//hours<10&&mins<10&&sec<10
ctx01.strokeText('本地时间：'+'0'+hours+':'+'0'+mins+':'+'0'+sec,100,80);
ctx01.fillText('本地时间：'+'0'+hours+':'+'0'+mins+':'+'0'+sec,100,80);
}else{
//hours<10&&mins<10&&sec>10
ctx01.strokeText('本地时间：'+'0'+hours+':'+'0'+mins+':'+sec,100,80);
ctx01.fillText('本地时间：'+'0'+hours+':'+'0'+mins+':'+sec,100,80);
}
}else{
//hours<10&&mins>10&&sec<10
if(sec<10){
ctx01.strokeText('本地时间：'+'0'+hours+':'+mins+':'+'0'+sec,100,80);
ctx01.fillText('本地时间：'+'0'+hours+':'+mins+':'+'0'+sec,100,80);
}else{
//hours<10&&mins>10&&sec>10
ctx01.strokeText('本地时间：'+'0'+hours+':'+mins+':'+sec,100,80);
ctx01.fillText('本地时间：'+'0'+hours+':'+mins+':'+sec,100,80);
}
}
}
else{
if(mins<10){
if(sec<10){
//hours>10&&mins<10&&sec<10
ctx01.strokeText('本地时间：'+hours+':'+'0'+mins+':'+'0'+sec,100,80);
ctx01.fillText('本地时间：'+hours+':'+'0'+mins+':'+'0'+sec,100,80);
}else{
//hours>10&&mins<10&&sec>10
ctx01.strokeText('本地时间：'+hours+':'+'0'+mins+':'+sec,100,80);
ctx01.fillText('本地时间：'+hours+':'+'0'+mins+':'+sec,100,80);
}
}else{
if(sec<10){
//hours>10&&mins>10&&sec<10
ctx01.strokeText('本地时间：'+hours+':'+mins+':'+'0'+sec,100,80);
ctx01.fillText('本地时间：'+hours+':'+mins+':'+'0'+sec,100,80);
}else{
//hours>10&&mins>10&&sec>10
ctx01.strokeText('本地时间：'+hours+':'+mins+':'+sec,100,80);
ctx01.fillText('本地时间：'+hours+':'+mins+':'+sec,100,80);
}
}
}
ctx01.closePath();
ctx01.restore();
}
2，做了兼容的requestAnimitionFrame循环函数
window.requestAnimFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
return window.setTimeout(callback, 1000 / 60);
};
})();
用canvas绘制一个时钟的更多相关文章
- 使用canvas绘制一个时钟
周末学习canvas的一些基础功能,顺带写了一个基础的时钟.现在加工一下,做的更好看一点,先放上效果图: 谈一些自己的理解: (1).要绘制一个新的样式(不想被其他样式影响,或者影响到其他样式),那么 ...
- 用canvas绘制一个简易时钟
在见识了html5中canvas的强大,笔者准备制作一个简易时钟. 下面就是成果啦,制作之前我们先分析一下,绘制一个时钟需要做哪些准备. 一 . 1.首先这个时钟分为表盘,指针(时针,分针,秒针)和数 ...
- 深夜，用canvas画一个时钟
深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...
- 通过H5的新标签canvas做出一个时钟的全过程，希望对初学者有帮助
最近学习了H5中的一个新标签canvas并且用它做出了一个时钟,最下面是成品图像,还不错吧,这只是我学习中的一个小demo,做得有点粗糙,但终究是做出来了,以后再写自己的网页主页再做一个好看点放上去. ...
- 用HTML5的canvas做一个时钟
对于H5来说,canvas可以说是它最有特色的一个地方了,有了它之后我们可以随意的在网页上画各种各样的图形,做一些小游戏啊什么的.canvas这个标签的用法,在网上也有特别多的教程了,这里就不作介绍了 ...
- HTML5 在canvas绘制一个矩形
笔者:本笃庆军 原文地址:http://blog.csdn.net/qingdujun/article/details/32930501 一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统 ...
- Canvas绘制一个大鱼喂小鱼的游戏
Canvas是HTML5中的一部分,强大的API足以让我们绘制我们任意想绘制的东西.利用Canvas的基础学习以及JavaScript面向对象的思想绘制一个小游戏,下面是源码地址https://git ...
- canvas绘制表盘时钟
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Canvas 绘制一个像素风电子时钟
想法是在 Canvas 上绘制由小方块组成的数字. 第一步是实现绘制小方块的方法,先画出一个边长为 5 的 10x10 个方块,使用两个 for 循环很简单就能完成. for (let i = 0; ...
随机推荐
- FZU1327 优先队列
Problem 1327 Blocks of Stones II Accept: 318 Submit: 881Time Limit: 1000 mSec Memory Limit : 3 ...
- 13年山东省赛 Boring Counting（离线树状数组or主席树+二分or划分树+二分）
转载请注明出处: http://www.cnblogs.com/fraud/ ——by fraud 2224: Boring Counting Time Limit: 3 Sec ...
- c中关于#与##的简易使用
#运算符用于在预编译时,将宏参数转换为字符串 eg. #include <stdio.h>#define CONVERT(f)(#f) void helloworld(){ printf( ...
- [原]用C#模拟实现扑克牌发牌、排序程序…
(1)52张扑克牌,四种花色(红桃.黑桃.方块和梅花),随机发牌给四个人. (2)最后将四个人的扑克牌包括花色打印在控制台上. 其中: 花色和点数用枚举类型实现 每张扑克牌用结构实 ...
- Django学习(七) 创建第一个Django项目
如果这是你第一次使用Django,你必须进行一些初始设置.即,您将需要自动生成一些代码,建立了Django项目. 从命令行.cd进入一个目录,你想要存储您的代码,然后运行以下命令: django-ad ...
- AJAX Data 传值 无效的JSON基元:AJAX jQuery的方法,用c#WEBMETHOD-c#,jquery.
我有这样的代码:I数据值,而不是连接字符串作为对象常量.为什么?看到这里 我的代码是这样的:- $.ajax({ url: "../Member/Home.aspx/SaveClient&q ...
- js void运用
谈谈Javascript中的void操作符 http://segmentfault.com/a/1190000000474941 总结: void有如下作用: 通过采用void 0取undefined ...
- Qt中调用PolarSSL库(一)
最近一直在学习SSL相关的知识,也是先了解理论相关的知识,主要是SSL相关的基本概念和连接建立过程,主要是基于PolarSSL开源库进行学习.学习完了之后就希望能给有所运用,就想用Qt写一个简单的程序 ...
- 感觉tbceditor很不错，如果作者能坚持下来，非常非常看好啊
感觉tbceditor很不错,如果作者能坚持下来,非常非常看好啊 你技术好,可以做个自用的IDE慢慢加功能 ,很方便的用这个控件,写个支持Delphi和html混编的编辑器,要不到2个小时
- javascript全局对象
一.Array 二.Boolean 三.Date 四.Error 五.EvalError 六.Function 七.JSON 八.Math 九.Number 十.Object 十一.RangeErro ...