利用js+canvas实现的时钟效果图
canvas+js时钟特效
运用js+canvas方面的知识完成一个时钟的效果图，再利用for循环实现指针的转动效果：
<!--网页文档的声明-->
<!doctype html>
<html>
<!--网页的头部-->
<head>
<meta charset="UTF-8">
<!--网页三要素-->
<meta name="Keywords" content="关键词">
<meta name="Description" content="关键词描述">
<title>时钟效果</title>
<!--CSS层叠样式表 加工 修饰-->
<style type="text/css">
*{margin:0;padding:0;}
body{background:url("img/2.jpg");}
#canvas{margin:100px auto;display:block;}
</style>
</head>
<!--网页的主体-->
<body>
<canvas id="canvas" width="500" height="500">
你的浏览器需要更新了更新请前往 www.xxx.com*——*
</canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');//获取上下文
var cxt = canvas.getContext('2d');//绘图轨迹 线 圆 矩形..
/*圆
cxt.beginPath();//开始
//cxt.fillStyle = "#006633";填充颜色
cxt.strokeStyle = "#ff00ff";
cxt.arc(250,250,200,0,360,false);//画圆方法
//cxt.fill();填充
cxt.stroke();
cxt.closePath();//结束
*/
clock()
function clock(){
cxt.clearRect(0,0,500,500)
var now = new Date();
var sec = now.getSeconds();
var min = now.getMinutes();
var hour = now.getHours();
hour = hour + min/60;
hours = hour>12?hour-12:hour;
//表盘
cxt.beginPath();
cxt.lineWidth =10;//线宽
cxt.strokeStyle = "#00ccff";
cxt.arc(250,250,200,0,360,false);
cxt.stroke();
cxt.closePath();
//分秒刻度 60个
for (var i=0;i<60 ;i++ )
{
cxt.save();
cxt.translate(250,250);
cxt.rotate(6*i*Math.PI/180);
cxt.lineWidth = "7";
cxt.strokeStyle ="#fff";
cxt.beginPath();
cxt.moveTo(0,-180);
cxt.lineTo(0,-190);
cxt.stroke();
cxt.closePath();
cxt.restore();
}
//时刻度
for (var i =0;i<12 ;i++ )
{
cxt.save();
cxt.translate(250,250);
cxt.rotate(30*i*Math.PI/180);
cxt.lineWidth = "7";
cxt.strokeStyle ="#ff0000";
cxt.beginPath();
cxt.moveTo(0,-175);
cxt.lineTo(0,-195);
cxt.stroke();
cxt.closePath();
cxt.restore();
}
//时针
cxt.save();//保存
cxt.strokeStyle = "yellow"
cxt.translate(250,250);
cxt.rotate(30*hours*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-100);
cxt.lineTo(0,20);
cxt.stroke();
cxt.closePath();
cxt.restore();
//分针
cxt.save();//保存
cxt.strokeStyle = "#00ff00";
cxt.lineWidth ="7";
cxt.translate(250,250);
cxt.rotate(6*min*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-130);
cxt.lineTo(0,20);
cxt.stroke();
cxt.closePath();
cxt.restore();
//秒针
cxt.save();
cxt.strokeStyle = "red";
cxt.lineWidth ="3";
cxt.translate(250,250);
cxt.rotate(6*sec*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-150);
cxt.lineTo(0,20);
cxt.stroke();
cxt.closePath();
cxt.beginPath();
cxt.fillStyle ="gray";
cxt.arc(0,0,5,0,360,false);
cxt.fill();
cxt.beginPath();
cxt.strokeStyle ="red";
cxt.arc(0,0,6,0,360,false);
cxt.stroke();
cxt.beginPath();
cxt.lineWidth ="1";
cxt.strokeStyle ="red";
cxt.moveTo(0,-150);
cxt.lineTo(4,-130);
cxt.stroke();
cxt.beginPath();
cxt.lineWidth ="1";
cxt.strokeStyle ="red";
cxt.moveTo(0,-150);
cxt.lineTo(-4,-130);
cxt.stroke();
cxt.restore();
}
setInterval(clock,1000)
//console.log(hour+'时'+min+'分'+sec+'秒')
</script>
</body>
</html>
