先给个效果图,我画的比较丑,大家可以自己美化一下,
直接上代码:
<!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();
cxt.lineWidth="3";
cxt.strokeStyle="black";
cxt.translate(250,250);
cxt.rotate(minute*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-150);
cxt.lineTo(0,15);
cxt.closePath();
cxt.stroke();
cxt.restore();
//秒针
cxt.save();
cxt.lineWidth="1.5";
cxt.strokeStyle="red";
cxt.translate(250,250);
cxt.rotate(second*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-160);
cxt.lineTo(0,20);
cxt.closePath();
cxt.stroke();
//秒针前端小点
cxt.beginPath();
//外环为红色
cxt.strokeStyle="red";
//灰色填充
cxt.fillStyle="gray";
cxt.arc(0,-145,4,0,360,false);
cxt.fill();
cxt.closePath();
cxt.stroke();
cxt.restore();
//表盘中心
cxt.beginPath();
cxt.lineWidth=1;
//外环为红色
cxt.strokeStyle="red";
//灰色填充
cxt.fillStyle="gray";
//路径函数 x,y,r,角度范围,顺时针/逆时针
cxt.arc(250,250,4,0,360,false);
cxt.fill();
cxt.stroke();
cxt.closePath();
//写时间
cxt.font="15px 黑体 ";
cxt.fillStyle="black";
//实心字
cxt.fillText(time,160,150);
}
//使用setInterval(代码,毫秒时间)使时钟转起来;
drawClock();
setInterval(drawClock,1000);
</script>
</body>
</html>
分享到:
相关推荐
html5 canvas画布绘制圆形时钟代码
html5---用canvas写一个时钟
NULL 博文链接:https://mooring.iteye.com/blog/1594032
html5 canvas云粒子数字时钟动画特效 html5 canvas云粒子数字时钟动画特效
使用html5中的canvas标签+jquery绘制的时钟走动代码
使用canvas实现动态时钟效果
canvas动画-星空效果动画
javascript - Canvas动画- 太空星球运动
Canvas 发光loading动画 --Canvas 发光loading动画 --Canvas 发光loading动画 --Canvas 发光loading动画
基于canvas的粒子时钟动画,用浏览器打开就能看到效果
HTML5 CSS3 Canvas技术生成很自然流畅的人体运动动画,模拟出了身体碰撞被挤压的动画特效,在实例中有一个大球,用户操作大球任意运动,碰撞到人体的任意部分后,人体会自然的受到挤压和躲避,可看到人的身体某部分...
用HTML5的canvas画时钟,怎么使用画布在浏览器上面绘画。画出一个漂亮的时钟。里面用到三角函数以及一些canvas的方法。
HTML5 Canvas红色灯笼时钟动画,红色风格,网页时钟,根据电脑时间走时。
canvas动画 - 背景线条 - 线条波动,很实用,作为动画背景,比静态背景图片效果更大气,更高端。
html2canvas-1.0.0-rc.4版本
HTML5 Canvas粒子数字时钟动画.zip
使用canvas绘制的实时时钟
HTML5 canvas爱心表白动画,爱心动画,鼠标移动旋转效果。
HTML5 Canvas 旋转的3D立方体动画,有纵深感的旋转立方体,渲染的很不错,旋转的动画效果流畅,十分不错,是研究HTML5 Canvas技术的好范例。经测试,IE11兼容,火狐或Chrome、Opera等都有完美表现。
前不久我们刚为大家分享过一款很不错的jQuery/CSS3带数字时钟的圆盘时钟...今天我们要继续为大家介绍另外一个基于HTML5 Canvas的圆形时钟动画。它的功能非常简单,就是一个简单的时钟,时针分针和秒针的颜色各不相同。