canvas 应用实例-我的时钟

最新推荐文章于 2024-07-02 22:34:09 发布

浅笑嫣然LG

最新推荐文章于 2024-07-02 22:34:09 发布

阅读量185

点赞数

分类专栏： h5-canvas学习

本文链接：https://blog.csdn.net/u012244130/article/details/53580871

版权

h5-canvas学习专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<title>时钟绘制</title>
<meta charset="utf-8">
</head>
<style type="text/css">
canvas {
margin: 50px auto;
display: block;
border:1px solid #aaa;
}
</style>
<body>
<canvas id="clock" class="canvas" width="100px" height="100px">
当前浏览器不支持canvas,请更换浏览器后再重试
</canvas>
</body>
<script type="text/javascript">
var dom=document.getElementById('clock'),
ctx=dom.getContext('2d'),
width=ctx.canvas.width,
height=ctx.canvas.height,
r=width/2,
rem=width/200;//比例为了支持不同画布大小
//画背景
var drawBackground =function(){
ctx.save();
ctx.translate(r,r); //旋转，将其中点平移到（r,r）的位置
ctx.beginPath(); //开始一条路径的绘制
ctx.lineWidth=10*rem;//设置线宽
ctx.arc(0,0,r-ctx.lineWidth/2,0,2*Math.PI,false); //顺时针画圆（0,2*PI）
ctx.stroke();//
var hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2];
ctx.font=18*rem+'px Arial';
ctx.textAlign='center';
ctx.textBaseline ='middle';//属性设置或返回在绘制文本时的当前文本基线
hourNumbers.forEach(function(number,i){
var rad=2*Math.PI/12*i,
x=Math.cos(rad)*(r-30*rem),//x坐标
y=Math.sin(rad)*(r-30*rem);
ctx.fillText(number,x,y);//设置字体
});
for(var i=0;i<60;i++) {
var rad=2*Math.PI/60*i,
x=Math.cos(rad)*(r-18*rem),//x坐标
y=Math.sin(rad)*(r-18*rem);
//重新一条路径绘制
ctx.beginPath();
if(i%5===0) {
ctx.fillStyle='#000';
ctx.arc(x,y,2*rem,0,2*Math.PI,false);
}else {
ctx.fillStyle='#ccc';
ctx.arc(x,y,2*rem,0,2*Math.PI,false);
}
ctx.fill();//绘制
}
}
//画时针
var drawHour=function(hour,minute) {
ctx.save();//保存当前环境状态
ctx.beginPath();
var rad=2*Math.PI/12*hour,
mrad=2*Math.PI/12/60*minute;//分针的弧度
ctx.rotate(rad+mrad);
ctx.lineWidth=6*rem;
ctx.lineCap='round';//设置为圆角
ctx.moveTo(0,10*rem);//移动到此点
ctx.lineTo(0,-r/2);
ctx.stroke();
ctx.restore();//恢复状态
};
//画分针
var drawMinute=function(minute) {
ctx.save();//保存当前环境状态
ctx.beginPath();
var rad=2*Math.PI/60*minute;
ctx.rotate(rad);
ctx.lineWidth=3*rem;
ctx.lineCap='round';
ctx.moveTo(0,10*rem);
ctx.lineTo(0,-r+30*rem); //将点移到此点
ctx.stroke();
ctx.restore();//恢复状态
}
//画秒针，画范围
var drawSecond=function(second) {
ctx.save();//保存当前环境状态
ctx.beginPath();
ctx.fillStyle='red';
var rad=2*Math.PI/60*second;
ctx.rotate(rad);
ctx.moveTo(-2*rem,20*rem);//将点移到此点
//只设置位置
ctx.lineTo(2*rem,20*rem);
ctx.lineTo(1,-r+18*rem);
ctx.lineTo(-1,-r+18*rem);
ctx.fill();
ctx.restore();//恢复状态
}
//画圆心
var drawDot=function() {
ctx.beginPath();
ctx.fillStyle='#fff';
ctx.arc(0,0,3*rem,0,2*Math.PI,false);
ctx.fill();
}
var draw=function () {
ctx.clearRect(0,0,width,height);//清除画布
var now=new Date(),
hour=now.getHours(),
minute=now.getMinutes(),
second=now.getSeconds();
drawBackground();
drawHour(hour,minute);
drawMinute(minute);
drawSecond(second);
drawDot();
ctx.restore();
}
draw();
setInterval(draw,1000);
</script>

</html>

演示：