基础知识点:
        
        canvas标签只是图形容器,您必须使用脚本来绘制图形。

getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。——获取上下文对象。

getContext("2d") 对象属性和方法,可用于在画布上绘制文本、线条、矩形、圆形等等。

fillRect(l,t,w,h):默认颜色是黑色

strokeRect(l,t,w,h):带边框的方块。默认一像素黑色边框

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

beginPath():定义开始绘制路径, 它把当前的点设置为 (0,0)。 当一个画布的环境第一次创建,beginPath() 方法会被显式地调用。

closePath():结束绘制路径(将起点与终点进行连接)

arcTo(x1,y1,x2,y2,radius):从上一点开始绘制一条弧线,到(x2,y2)为止,并且以给定的半径radius穿过(x1,y1)。

lineTo(x,y):从一点开始绘制一条直线,到(x,y)为止。

moveTo(x,y):将绘图游标移动到(x,y),不画线。

font:表示文本样式、大小及字体,用css中指定字体的格式来指定,例如"bold 10px Arial"。

textAlign:表示文本对齐方法。可能的值有"start"、"end"、"left"、"right"和"center"。建议使用"start"和"end",不要使用“left”和“right”,因为前两者的意思更稳妥,能同时适合从左到右和从右到左

显示(阅读)的语言。

textBaseline:表示文本的基线。可能的值有“top”、“hanging”、“middle”、“alphabetic”、"ideographic"和“bottom”。

fillText(),strokeText():这两个方法都可以接收4个参数:要绘制的文本字符串、x坐标、y坐标和和可选的最大像素宽度,文本最大像素宽度(尚未得到所有浏览器的支持,最早支持他的是firefox4)

绘制圆形

arc( x,y,半径,起始弧度,结束弧度,旋转方向,fasle)

x,y:起始位置

弧度与角度的关系:弧度=角度*Math.PI/180            2*Math.PI代表360度的弧度

旋转方向:顺时针(默认:false,逆时针:true)

注意点:

1.注意canvas画图的层次关系

2.注意合理利用beginPath()和closePath()

3.由于圆心每个角度的坐标点无法准确确定,因此用arc()化弧度,从而的得到刻度浮点,然后通过closePath闭合形成路径,填充,然后在填充一个较小的圆填充白色,从而产生刻度。
        
        4.通过fillText(),strokeText()来打上时间点。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>html5 canvas打造时钟</title>
<style type="text/css">
body,h3{margin:0;text-align:center}
h3{
padding:0;
text-align:center;
background:#333;
font-size:1.5em;
color:#fff;
line-height:2em;
text-shadow:0 0 10px rgba(0, 39, 245, 0.65);
}
#canvas{
margin:20px 0;
border:1px solid #bbb;
background:#D6D5D5;
}
p{text-align:center;color:#bbb}
</style>
</head>
<body>
<h3>html5 canvas打造时钟</h3>
<canvas id="canvas" width="600" height="600">
您的浏览器不支持canvas,请使用高级浏览器。
http://blog.segmentfault.com/trigkit4/1190000000652925
</canvas>
<p>似水流年,且行且珍惜!</p>
<script type="text/javascript">
var canvas=document.getElementById('canvas');
if(canvas.getContext){
var context=canvas.getContext('2d');
drawClock(context);
setInterval(function(){drawClock(context)},1000);
} function drawClock(canvas){
var x=300, //钟表圆心坐标
y=300
r=200; //钟表半径 //清除画布
canvas.clearRect(0,0,canvas.width,canvas.height); //修饰部分 即,建立一个白色的画布
canvas.beginPath();
canvas.moveTo(x,y);
canvas.arc(x,y,r,0,360,false);
canvas.closePath();
canvas.fillStyle='#fff';
canvas.fill(); //镶嵌时钟数字 var date=new Date(),//创建日期对象
hours=date.getHours(),
minutes=date.getMinutes(),
seconds=date.getSeconds(); var hoursValue=(-90 + hours*30+minutes/2)*Math.PI/180,
minutesValue=(-90+minutes*6)*Math.PI/180,
secondsValue=(-90+seconds*6)*Math.PI/180; canvas.beginPath();
for(var i=0;i<60;i++){
canvas.moveTo(x,y);
canvas.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
} canvas.closePath();
canvas.stroke(); canvas.beginPath();
canvas.moveTo(x,y);
canvas.fillStyle='#fff'; canvas.arc(x,y,r*19/20,0,2*Math.PI,false); canvas.closePath();
canvas.fill(); canvas.beginPath();
canvas.lineWidth=3; for(var i=0;i<12;i++){
canvas.moveTo(x,y); canvas.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false)
}
canvas.closePath();
canvas.stroke(); canvas.beginPath();
canvas.arc(x,y,r*18/20,0,2*Math.PI,false);
canvas.closePath();
canvas.fillStyle='#fff';
canvas.fill();
canvas.font="bold 16px Arial";
canvas.textAlign='center';
canvas.textBaseLine='middle';
canvas.fillStyle='red';
canvas.fillText('12',x,y-165,200);
canvas.fillText('6',x,y+165,200);
canvas.fillText('3',x+165,y+5,200);
canvas.fillText('9',x-165,y+5,200);
dyear=date.getFullYear(),
dmonth=date.getMonth()+1,
dDate=date.getDate(),
weeks=date.getDay();
canvas.fillText(dyear+'-'+dmonth+'-'+dDate+' '+dateWeek(weeks)+' '+hours+':'+toDouble(minutes)+':'+toDouble(seconds),x,y+60,200); canvas.lineWidth=5;
canvas.beginPath();
canvas.moveTo(x,y);
canvas.arc(x,y,r*10/20,hoursValue,hoursValue,false);
canvas.closePath();
canvas.stroke(); canvas.lineWidth=3;
canvas.beginPath();
canvas.moveTo(x,y);
canvas.arc(x,y,r*14/20,minutesValue,minutesValue,false);
canvas.closePath();
canvas.stroke(); canvas.lineWidth=1;
canvas.beginPath();
canvas.moveTo(x,y);
canvas.arc(x,y,r*16/20,secondsValue,secondsValue,false);
canvas.closePath();
canvas.stroke();
} function toDouble(num){
num>=10 ? num=''+num : num='0'+num ;
return num;
} function dateWeek(data){
switch(data){
case 1:
return '星期一';
break;
case 2:
return '星期二';
break;
case 3:
return '星期三';
break;
case 4:
return '星期四';
break;
case 5:
return '星期五';
break;
case 6:
return '星期六';
break;
case 7:
return '星期日';
break;
}
}
</script>
</body>
</html>

  

html5 canvas时钟的更多相关文章

  1. HTML5 Canvas 时钟

    1. [图片] QQ截图20120712130049.png ​2. [代码][HTML]代码 <!DOCTYPE html><html lang="en" &g ...

  2. html5 canvas 圆形抽奖的实例

    年底没啥,抽空学习了canvas,写了个html5抽奖的代码,造了个轮子,有用的童鞋可以拿走. 其中,canvas.onclick触发抽奖行为,概率可以在core.lottery()函数上添加,美化也 ...

  3. html5 canvas绘画时钟

    本示例使用HTML5 canvas,模拟显示了一个时钟, 请使用支持HTML5的浏览器预览效果: HTML部分: <!DOCTYPE html> <html lang="e ...

  4. HTML5之Canvas时钟(网页效果--每日一更)

    今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...

  5. [ZZ+CH] Html5 canvas+js 时钟

    总之新Blog入驻以后,又开始老习惯,到处折腾自定义的空间,放些东西. 想起以前大一的时候做过一个Javascript的时间显示器,现在想做一个时钟,当然现在老奸巨猾,会先去看一看有前辈写过没. 前辈 ...

  6. HTML5 Canvas爱心时钟代码

    这是一款数字时钟动画,数字又多个小爱心组成,又何问起整理,随着时间推进,每一秒钟新数字替换旧数字,旧数字离去使用天女散花动画,花是五颜六色的. 查看效果:http://hovertree.com/te ...

  7. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  8. [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形)

    绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画 ...

  9. 前端特效demo | 值得收藏的6个 HTML5 Canvas 实用案例

    HTML5 动画在Canvas 上得到了充分的发挥,我们 VIP 视频也分享过很多相关的动画特效制作视频,这次给大家带来 6 款超炫酷的HTML5 canvas 动画的 demo,一起来看看吧~ 文内 ...

随机推荐

  1. 【python-proxy by sockets5】pysocks

    pip install pysocks https://stackoverflow.com/questions/2317849/how-can-i-use-a-socks-4-5-proxy-with ...

  2. perforce变量配置与使用

    linux Perforce 使用 1.配置环境变量: 下载  perforce    放到/usr/bin/下 export P4PORT=192.168.4.88:1666 #P4所在的主机exp ...

  3. android手机内的通讯录数据库

    今天看了一下 android手机内的通讯录数据库,简单的汇总了一下. 数据库见附件中的contacts2.db , 里面一共有40个表,34个视图,很庞大,挑几个重点的看一下. 1.表Raw_cont ...

  4. C++ 保存Excel文件(带密码保护)

    最近有客户需求报表保存为xls的功能,需要保存的文件设置密码保护,特进行尝试! Workbook.SaveAs method (Excel) 参数详情:https://docs.microsoft.c ...

  5. tomcat8.0 基本参数调优配置

    1.优化内核及TCP连接:   fs.file-max = 655350 # 系统文件描述符总量 net.ipv4.ip_local_port_range = 1024 65535 # 打开端口范围 ...

  6. [Module] 03 - Software Design and Architecture

    本篇涉及内容: ORM框架(无需再用contentprovider或者sqlitedatebasehelper之类的古董工具了) 规划各种业务Bean文件(配合ORM框架) 设计一个好的请求基类(Ba ...

  7. Sql Server 跨服务器连接

    用openrowset连接远程SQL或插入数据 --如果只是临时访问,可以直接用openrowset --查询示例 select * from openrowset('SQLOLEDB', 'sql服 ...

  8. 8 -- 深入使用Spring -- 2...2 指定Bean的作用域

    8.2.2 指定Bean的作用域 当使用XML 配置方式来配置Bean实例时,可以通过scope来指定Bean实例的作用域,没有指定scope属性的Bean实例作用域默认是singleton. 当采用 ...

  9. NetBpm XML解读(5)

    原文: nPdl的翻译 在看NetBPM的nPdl文档时做了个翻译,一来是让自己能更好的理解nPdl,二来是希望能得到关心NetBPM的同志的指导.    由于对工作流不熟悉,所以有不少术语翻译没有把 ...

  10. Maven update project...后jdk变成1.5,update project后jdk版本改变

    Maven update project...后jdk变成1.5,update project后jdk版本改变 ============================== 蕃薯耀 2018年3月14 ...