HTML5使用canvas元素绘制指针式动画时钟

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

jerry

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html>   
<head>   
<meta charset="UTF-8">
<title>HTML5 canvas元素绘制指针式动画时钟</title>
<script type="text/javascript">
var canvas;
var context;
//页面装载
function window_onload()
{
    canvas=document.getElementById("canvas");//获取canvas元素
    context=canvas.getContext('2d');//获取canvas元素的图形上下文对象
    setInterval("draw()",1000);//每隔一秒重绘时钟，重新显示时间
}
//绘制时钟
function draw()
{    
    var radius=Math.min(canvas.width / 2, canvas.height / 2) -25;//时钟罗盘半径
    var centerx=canvas.width/2;//时钟中心横坐标
    var centery=canvas.height/2;//时钟中心纵坐标
    context.clearRect(0,0,canvas.width,canvas.height);//擦除之前所绘时钟
    context.save();//保存当前绘制状态
    //绘制时钟圆盘
    context.fillStyle = '#efefef';//时钟背景色
    context.strokeStyle = '#c0c0c0';//时钟边框颜色
    context.beginPath();//开始创建路径
    context.arc(centerx,centery,radius, 0,Math.PI*2, 0);//创建圆形罗盘路径
    context.fill();//用背景色填充罗盘
    context.stroke();//用边框颜色绘制罗盘边框
    context.closePath();//关闭路径
    context.restore();//恢复之前保存的绘制状态
    //绘制时钟上表示小时的文字
    var r = radius - 10;//缩小半径，因为要将文字绘制在时钟内部
    context.font= 'bold 16px 宋体';//指定文字字体
    Drawtext('1', centerx + (0.5 * r), centery - (0.88 * r));
    Drawtext('2', centerx + (0.866 * r), centery - (0.5 * r));
    Drawtext('3', centerx + radius - 10,centery);
    Drawtext('4', centerx + (0.866 * r), centery + (0.5 * r));
    Drawtext('5', centerx + (0.5 * r), centery + (0.866 * r));
    Drawtext('6', centerx, centery + r);
    Drawtext('7', centerx - (0.5 * r), centery + (0.866 * r));
    Drawtext('8', centerx - (0.866 * r), centery + (0.49 * r));
    Drawtext('9', centerx - radius + 10, centery);
    Drawtext('10',centerx - (0.866 * r),centery - (0.50 * r));
    Drawtext('11', centerx - (0.51 * r), centery - (0.88 * r));
    Drawtext('12', centerx, 35);
    //绘制时钟指针    
    var date=new Date();//获取需要表示的时间
    var h = date.getHours();//获取当前小时
    var m = date.getMinutes();//获取当前分钟
    var s=date.getSeconds();//获取当前秒
    var a = ((h/12) *Math.PI*2) - 1.57 + ((m / 60) * 0.524);//根据当前时间计算指针角度
    context.save();//保存当前绘制状态      
    context.fillStyle='black'; //指定指针中心点的颜色
    context.beginPath();//开始创建路径
    context.arc(centerx,centery,3,0,Math.PI * 2, 0);//创建指针中心点的路径
    context.closePath();//关闭路径
    context.fill();//填充指针中心点
    context.lineWidth=3;//指定指针宽度   
    context.fillStyle='darkgray';//指定指针填充颜色
    context.strokeStyle='darkgray';//指定指针边框颜色
    context.beginPath();//开始创建路径
    //绘制小时指针
    context.arc(centerx,centery,radius - 55, a + 0.01, a, 1);
    context.lineTo(centerx,centery);
    //绘制分钟指针
    context.arc(centerx,centery,radius - 40, ((m/60) * 6.27) - 1.57, ((m/60) * 6.28) - 1.57, 0);
    context.lineTo(canvas.width / 2, canvas.height / 2);
    //绘制秒钟指针
    context.arc(centerx,centery,radius - 30, ((s/60) * 6.27) - 1.57, ((s/60) * 6.28) - 1.57, 0);
    context.lineTo(centerx,centery);
    context.closePath();//关闭路径
    context.fill();//填充指针
    context.stroke();//绘制指针边框
    context.restore();//恢复之前保存的绘制状态
    //指定时钟下部当前时间所用的字符串，文字格式为hh:mm:dd
    var hours   = String(h);
    var minutes = String(m);
    var seconds = String(s);
    if (hours.length == 1)   h   = '0' + h;
    if (minutes.length == 1) m = '0' + m;
    if (seconds.length == 1) s = '0' + s;
    var str =h + ':' + m + ':' +s;
    //绘制时钟下部的当前时间
    Drawtext(str, centerx, centery + radius + 12);
}
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();
}
</script>
<style>
div{display: -moz-box;display: -webkit-box;-moz-box-pack: center;-webkit-box-pack: center;width:100%;}
canvas{background-color:white;}
</style> 
</head>  
<body onload="window_onload()">  
<div><h1>HTML5使用canvas元素绘制指针式动画时钟</h1></div>
<div><canvas id="canvas" width="200px" height="200px"></canvas><div>
</body>  
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

HTML5使用canvas元素绘制指针式动画时钟

分类

HTML5代码

描述

HTML5使用canvas元素绘制指针式动画时钟，也就是手表式的电子钟，本示例对于学习HTML5来说是相当不错的，因为里面有很多的代码注释，特别是想学习HTML5的朋友，更应该看一看。测试时，请确保你的浏览器必须支持HTML5的属性，否则Canvas无...