canvas时钟代码,Css代码库,德仔网

代码语言
代码分类
【Css】 canvas时钟
作者:Kerbores / 发布于2013/12/26/ 903
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML CLOCK</title>
</head>
<body>
 <canvas width="500" height="500" id="clock">
  你的浏览器不支持canvas标签，时针显示不出来哦！
 </canvas>
 
 <script type="text/javascript">
 //画布背景颜色
 var clockBackGroundColor = "#ABCDEF";
 //时针颜色
 var hourPointColor = "#000";
 //时针粗细
 var hourPointWidth = 7;
 //时针长度
 var hourPointLength = 100;
 //分针颜色
 var minPointColor = "#000";
 //分针粗细
 var minPointWidth = 5;
 //分针长度
 var minPointLength = 150;
 //秒针颜色
 var secPointColor = "#F00";
 //秒针粗细
 var secPointWidth = 3;
 //秒针长度
 var secPointLength = 170;
 //表盘颜色
 var clockPanelColor = "#ABCDEF";
 //表盘刻度颜色
 var scaleColor = "#000";
 //表盘大刻度宽度 3 6 9 12
 var scaleBigWidth = 9;
 //表盘大刻度的长度
 var scaleBigLength = 15;
 //表盘小刻度的宽度
 var scaleSmallWidth = 5;
 //表盘小刻度的长度
 var scaleSmallLength = 10;
 //圆心颜色
 var centerColor = 'red';
 
 
 //时钟画布
 var clock = document.getElementById('clock');
 clock.style.background = clockBackGroundColor;
 //时针画布的作图环境（画板）
 var panel = clock.getContext('2d');
 
 
 //画线
 /**
 *画线段
 *
 *
 */
 function drowLine(p,width,color,startX,startY,endX,endY,ran,cX,cY){
  //保存传入的画板，相当于每次作画新开一个图层
  p.save();
  //设置画笔宽度
  p.lineWidth = width;
  //设置画笔颜色
  p.strokeStyle = color;
  //新开启作图路径，避免和之前画板上的内容产生干扰
  p.beginPath();
  p.translate(cX,cY);
  //旋转
  p.rotate(ran);
  //移动画笔到开始位置
  p.moveTo(startX,startY);
  //移动画笔到结束位置
  p.lineTo(endX,endY);
  //画线操作
  p.stroke();
  //关闭作图路径，避免和之后在画板上绘制的内容产生干扰
  p.closePath();
  //在传入的画板对象上覆盖图层
  p.restore();
 }
 /**
 *画水平线
 */
 function drowHorizontalLine(p,width,length,color,startX,startY,ran,cX,cY){
  drowLine(p,width,color,startX,startY,startX+length,startY,ran,cX,cY);
 }
 /**
 *画圈圈
 */
 function drowCircle(p,width,color,centreX,centreY,r){
  p.save();
  //设置画笔宽度
  p.lineWidth = width;
  //设置画笔颜色
  p.strokeStyle = color;
  //新开启作图路径，避免和之前画板上的内容产生干扰
  p.beginPath();
  //画圈圈
  p.arc(centreX,centreY,r,0,360,false);
  //画线操作
  p.stroke();
  //关闭作图路径，避免和之后在画板上绘制的内容产生干扰
  p.closePath();
  //在传入的画板对象上覆盖图层
  p.restore();
 }
 function drowPoint(p,width,color,centreX,centreY,r){
  p.save();
  //设置画笔宽度
  p.lineWidth = width;
  //设置画笔颜色
  p.fillStyle = color;
  //新开启作图路径，避免和之前画板上的内容产生干扰
  p.beginPath();
  //画圈圈
  p.arc(centreX,centreY,r,0,360,false);
  //画线操作
  p.fill();
  //关闭作图路径，避免和之后在画板上绘制的内容产生干扰
  p.closePath();
  //在传入的画板对象上覆盖图层
  p.restore();
 }
 function drowScales(p){
  //画小刻度
  for(var i = 0;i < 60;i++){
   drowHorizontalLine(p,scaleSmallWidth,scaleSmallLength,scaleColor,195-scaleSmallLength,0,i*6*Math.PI/180,250,250);
  }
  //画大刻度
  for(var i = 0;i < 12;i++){
   drowHorizontalLine(p,i%3==0?scaleBigWidth*1.2:scaleBigWidth,i%3==0?scaleBigLength*1.2:scaleBigLength,scaleColor,195-scaleBigLength,0,i*30*Math.PI/180,250,250);
   //可以添加数字刻度
  }
 }
 function drowHourPoint(p,hour){
  drowHorizontalLine(p,hourPointWidth,hourPointLength,hourPointColor,-10,0,(hour-3)*30*Math.PI/180,250,250);
 }
 function drowMinPoint(p,min){
  drowHorizontalLine(p,minPointWidth,minPointLength,minPointColor,-15,0,(min-15)*6*Math.PI/180,250,250);
 }
 function drowSecPoint(p,sec){
  drowHorizontalLine(p,secPointWidth,secPointLength,secPointColor,-15,0,(sec-15)*6*Math.PI/180,250,250);
 }
 function drowClock(){
  panel.clearRect(0,0,500,500);
  
  panel.fillText("联系作者 Kerbores@gmail.com",10,20);
  panel.fillText("http://kipy.xicp.net",10,40);
  var date = new Date();
  var sec = date.getSeconds();
  var min = date.getMinutes();
  var hour = date.getHours() + min/60;
  drowCircle(panel,7,'blue',250,250,200);
  drowScales(panel);
  
  drowHourPoint(panel,hour);
  drowMinPoint(panel,min);
  drowSecPoint(panel,sec);
  
  drowPoint(panel,1,centerColor,250,250,7);
  //drowHorizontalLine(panel,10,10,'red',-5,0,0,250,250);
 }
 //drowHorizontalLine(panel,7,30,'#F00',0,0,Math.PI,250,250);
 drowClock();
 setInterval(drowClock,1000);
 function save(){
  var image = clock.toDataURL("image/png").replace("image/png", "image/octet-stream");
  location.href=image;
 }
</script>
</body>
</html>
试试其它关键字
　时钟　
同语言下
可能有用的
Kerbores贡献的其它代码(1)
.canvas时钟