您的位置：首页 > Web前端 > HTML5

HTML5画时钟

2014-02-12 10:26 363 查看 
<!doctype html>
<html>
<head></head>
<body>
<canvas id="clock" width="600" height="600" >浏览器不支持canvas标签</canvas>

<script>
//表盘,蓝色
//刻度:12个时刻度,60个分刻度
//指针:时针,分针,秒针(红色)
//获取画布DOM(此时还不可以操作),一个页面中可能存在多个画布
var clock = document.getElementById('clock');
//设置绘图环境,新建一个2d绘图环境
var cxt = clock.getContext('2d');

function drawClock(){
//每次清除画布
cxt.clearRect(0,0,600,600);
//获取时间对象,注意处理时间格式问题,12小时制
var now = new Date();
var hour = now.getHours();
var hourText = hour;
var minute = now.getMinutes();
var second = now.getSeconds();
//alert(hour+'点'+minute+'分'+second+'秒');
//时针需获取浮点类型,加上对应的分钟数转化成的小时
hour = hour + minute/60;
//将24小时进制转换成12小时进制
hour = hour>12?hour-12:hour;
//画数字格式时间显示
//在矩形中设置文字
//画一个矩形,圈住空心字 它不属于路径
cxt.beginPath();
//重新设置画笔
cxt.lineWidth=2;
cxt.strokeStyle="#000000";
cxt.rect(160,270,150,40);
cxt.stroke();
cxt.closePath();
//实心
//字体样式
cxt.lineWidth=1;
cxt.font="20px 黑体";//CSS Font属性,有顺序限制
cxt.fillText(hourText+'点'+minute+'分'+second+'秒',200,200);
//空心
cxt.strokeText(hourText+'点'+minute+'分'+second+'秒',170,300);
//表盘(蓝色)
cxt.lineWidth = 10;
cxt.strokeStyle = "BLUE";
cxt.beginPath();
cxt.arc(250,250,200,0,360,false);
cxt.closePath();
cxt.stroke();
//刻度
//时刻度
for(var i = 0;i<12;i++){
cxt.save();
cxt.lineWidth = 7;
cxt.strokeStyle = "BLACK"
//设置0,0点
cxt.translate(250,250);
//设置旋转角度:角度*Math.PI/180
cxt.rotate(i*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-190);
cxt.lineTo(0,-170);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//分刻度
for(var i = 0;i<60;i++){
cxt.save();
cxt.lineWidth = 4;
cxt.strokeStyle = "BLACK"
//设置0,0点
cxt.translate(250,250);
//设置旋转角度:角度*Math.PI/180
cxt.rotate(i*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-190);
cxt.lineTo(0,-180);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//时针,默认指向3点
cxt.save();
cxt.lineWidth = 7;
cxt.strokeStyle = "BLUE";
cxt.translate(250,250);
cxt.rotate(hour*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-140);
cxt.lineTo(0,10);
cxt.closePath();
cxt.stroke();
cxt.stroke();
cxt.restore();
//分针,默认指向6点
cxt.save();
cxt.lineWidth = 4;
cxt.strokeStyle = "BLACK";
cxt.translate(250,250);
cxt.rotate(minute*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-160);
cxt.lineTo(0,10);
cxt.closePath();
cxt.stroke();
cxt.restore();
//秒针,默认指向10点-50秒(1秒对应6度)
cxt.save();
cxt.lineWidth = 1;
cxt.strokeStyle = "RED";
cxt.translate(250,250);
cxt.rotate(second*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-170);
cxt.lineTo(0,20);
cxt.closePath();
cxt.stroke();
//画出交叉点
cxt.beginPath();
cxt.arc(0,0,5,0,360,false);
//设置填充样式
cxt.fillStyle = "YELLOW";
cxt.fill();
//设置笔触样式
cxt.strokeStyle = "RED";
cxt.stroke();
cxt.closePath();
//画秒针前端小○点
cxt.beginPath();
cxt.arc(0,-160,5,0,360,false);
//设置填充样式
cxt.fillStyle = "RED";
cxt.fill();
//设置笔触样式
cxt.strokeStyle = "YELLOW";
cxt.stroke();
cxt.closePath();
cxt.restore();
}
//使用setInterval(代码,周期毫秒),让时钟动起来
//为了避免刚开始时页面出现空白,先画一次
drawClock();
setInterval(drawClock,1000);
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  HTML5
相关文章推荐
新的分享
章节导航