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

html5小栗子---canvas时钟

2017-07-31 18:54 381 查看

1.首先在该项目下的img目录中准备一张背景图片 4.png

2.然后编写Html代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background:#fff;
}
#clock{
background: #fff;
}
#pic{
}
</style>
</head>
<body>
<canvas id="clock" width="400" height="400">
<img src="img/4.png" alt="" id="pic">
</canvas>
</body>
<script>
var cvs=document.getElementById('clock');
var ctx=cvs.getContext('2d');
var oImg=document.getElementById('pic');
function  clock() {
ctx.clearRect(0,0,400,400);
var img=document.getElementById('pic');
ctx.drawImage(img,100,100,200,200);//引入图片做背景
//画圆
ctx.beginPath();
ctx.strokeStyle='#60D9F8';
ctx.arc(200,200,150,0,360*Math.PI/180,false);
ctx.lineWidth=4;
ctx.stroke();
ctx.clip();
ctx.drawImage(oImg,50,50,300,300);
ctx.closePath();
//画分刻度
for(var i=0;i<60;i++){
ctx.save();
ctx.beginPath();
ctx.translate(200,200);//重新映射画布(200,200)的位置
ctx.rotate(i*6*Math.PI/180);//旋转当前绘图
ctx.strokeStyle='#FF99CC';
ctx.lineWidth=3;
ctx.moveTo(0,-140);//在半径的线上,把路径移动到画布中的指定点，不创建线条。
ctx.lineTo(0,-150);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
//画时刻度
for(var i=0;i<12;i++){
ctx.save();
ctx.beginPath();
ctx.translate(200,200);//重新映射画布(200,200)的位置
ctx.rotate(i*30*Math.PI/180);//旋转当前绘图
ctx.strokeStyle='#6699CC';
ctx.lineWidth=5;
ctx.moveTo(0,-135);//在半径的线上,把路径移动到画布中的指定点，不创建线条。
ctx.lineTo(0,-150);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
//获取时间
var now=new Date();
var second=now.getSeconds();
var minute=now.getMinutes()+second/60;
var hour=now.getHours()+minute/60;
//写时间
var h2=now.getHours();
var m2=now.getMinutes();
var str1=h2>9?h2:('0'+h2);
var str2=m2>9?m2:('0'+m2);
ctx.beginPath();
ctx.fillStyle='#000';
ctx.font='20px 微软雅黑';
ctx.fillText(str1+':'+str2,175,320);
ctx.closePath();
//画时针
ctx.beginPath();
ctx.strokeStyle='#CCFFFF';
ctx.moveTo(200,200);
ctx.arc(200,200,80,(hour*30-90)*Math.PI/180,(hour*30-90)*Math.PI/180,false);
ctx.stroke();
//画分针
ctx.beginPath();
ctx.moveTo(200,200);
ctx.arc(200,200,100,(minute*6-90)*Math.PI/180,(minute*6-90)*Math.PI/180,false);
ctx.stroke();
//画秒针
ctx.beginPath();
ctx.moveTo(200,200);
ctx.arc(200,200,120,(second*6-90)*Math.PI/180,(second*6-90)*Math.PI/180,false);
ctx.stroke();
}
clock();
setInterval(clock,1000);
</script>
</html>

3.效果如下:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5 canvas 时钟

相关文章推荐

新的分享

章节导航