玩转html5（4）-使用canvas画一个时钟（可以动的哦！）
日期：2014-05-16 浏览次数：20944 次
玩转html5（四）----使用canvas画一个时钟（可以动的哦！）
先给个效果图，我画的比较丑，大家可以自己美化一下，
直接上代码：
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<body>
<canvas width="500" height="500" id="clock" >
您的浏览器不支持canvas
</canvas>
<script>
//获取画布
var clock=document.getElementById('clock');
//设置绘图环境
var cxt=clock.getContext('2d');
function drawClock(){
//清除画布
cxt.clearRect(0,0,500,500);
//获取时间，
var now =new Date();
var second =now.getSeconds();
var minute =now.getMinutes();
var hour1 =now.getHours();
//将24小时进制转为12小时，且为浮点型
var hour=hour1+minute/60;
hour=hour>12 ?hour-12:hour;
//获取全部时间
var time=now.toLocaleString( );
//表盘
//开始新路径
cxt.beginPath();
cxt.lineWidth=8;
cxt.strokeStyle="blue";
//路径函数 x,y,r,角度范围,顺时针/逆时针
cxt.arc(250,250,200,0,360,false);
cxt.stroke();
cxt.closePath();
//刻度,利用旋转
//时刻度
for(var i=0;i<12;i++){
//保存当前状态
cxt.save();
//刻度粗细
cxt.lineWidth=5;
//刻度颜色
cxt.strokeStyle="black"
//设置00点,以画布中心为00
cxt.translate(250,250);
//设置旋转角度 参数是弧度，角度 0--360 弧度角度*Math.PI/180
cxt.rotate(i*30*Math.PI/180);
cxt.beginPath();
//刻度起始点
cxt.moveTo(0,-180);
//刻度结束点
cxt.lineTo(0,-195);
cxt.closePath();
cxt.stroke();
//将旋转后的图片返回原画布
cxt.restore();
}
//分刻度
for(var i=0;i<60;i++){
//保存当前状态
cxt.save();
//刻度粗细
cxt.lineWidth=3;
//刻度颜色
cxt.strokeStyle="black"
//设置00点,以画布中心为00
cxt.translate(250,250);
//设置旋转角度 参数是弧度，角度 0--360 弧度角度*Math.PI/180
cxt.rotate(i*6*Math.PI/180);
cxt.beginPath();
//起始点
cxt.moveTo(0,-188);
cxt.lineTo(0,-195);
cxt.closePath();
cxt.stroke();
//将旋转后的图片返回原画布
cxt.restore();
}
//表盘中心
cxt.beginPath();
cxt.lineWidth=1;
cxt.strokeStyle="red";
cxt.fillStyle="red";
//路径函数 x,y,r,角度范围,顺时针/逆时针
cxt.arc(250,250,4,0,360,false);
cxt.fill();
cxt.stroke();
cxt.closePath();
//时针
//保存当前状态
cxt.save();
cxt.lineWidth=5;
cxt.strokeStyle="black";
//设置异次元空间00点
cxt.translate(250,250);
//设置旋转角度 参数是弧度，角度 0--360 弧度角度*Math.PI/180
cxt.rotate(hour*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-120);
cxt.lineTo(0,10);
cxt.closePath();
cxt.stroke();
cxt.restore();
//分针
cxt.save();
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
