小项目-canvas写时钟

最新推荐文章于 2019-04-01 17:40:39 发布

lhh_12345

最新推荐文章于 2019-04-01 17:40:39 发布

阅读量407

点赞数

分类专栏： HTML5 文章标签： HTML5 时钟

本文链接：https://blog.csdn.net/lhh_12345/article/details/53427194

版权

HTML5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>my first canvas project</title>
<style type="text/css">
body{ width:100%;height:100%; background:#ac9f94;}
#drawing{display:block;margin:40px auto 0 auto; background:#ac9f94;}
</style>
</head>

<body>
<canvas id="drawing" width="1600px" height="760px">你看不见图片的时候就会看见我</canvas>

<script type="text/javascript">
  //第一步找到canvas
var drawing=document.getElementById("drawing");
var context;
  //第二步判断浏览器支持canvas
if(drawing.getContext)
{
  //第三步获取绘图上下文
  context=drawing.getContext("2d");	
  context.strokeStyle="#fff";
  setInterval(minute,1000);
}

function minute(){
  var day=new Date();
  var hour=day.getHours();
  var minute=day.getMinutes();
  var seconds=day.getSeconds();
  var gradient;  
   hour=hour+minute/60;
   hour=hour<12?hour:hour-12;
   minute= minute+seconds/60;

  context.fillStyle="#ac9f94";
  context.clearRect(0,0,1600,760);
     
  context.save();
  gradient=context.createLinearGradient(800,80,800,680);
  gradient.addColorStop(0,"#3d3734");
  gradient.addColorStop(1,"#000");
  context.fillStyle="gradient"; 
  context.beginPath();
  context.moveTo(500,380);
  context.fillRect(500,380,600,300);
  context.closePath();
  context.restore();
  
  //外表盘
  context.save();
  context.beginPath();
  context.shadowColor="#b9af9c";
  context.shadowBlur=200;
  context.fillStyle="#f4f4ea";
  context.lineWidth=5;
  gradient=context.createLinearGradient(800,80,800,680);
  gradient.addColorStop(0,"#fff");
  gradient.addColorStop(1,"#f4f4ea"); 
  context.strokeStyle=gradient;
  context.moveTo(1100,380); 
  context.arc(800,380, 300, 0, 2*Math.PI, false);
  context.fill();
  context.stroke();
  context.closePath();
  context.restore();
  
   //内表盘  
  context.beginPath();
  context.moveTo(1090,380);
  context.arc(800,380, 190,  0, 2*Math.PI, false);
  gradient=context.createLinearGradient(800,190,800,570);
  gradient.addColorStop(0,"#e8e8de");
  gradient.addColorStop(1,"#f4f4ea"); 
  context.fillStyle=gradient;
  context.fill();
  context.closePath();
  
  //设置圆盘中的12个小圆圈
  for(var i=0;i<12;i++)
  {
	context.save();
	context.fillStyle="#eaeae0";
	gradient=context.createLinearGradient(0,-255,0,-235);
    gradient.addColorStop(0,"#e9e5e4");
    gradient.addColorStop(1,"#f6f6ee"); 
    context.fillStyle=gradient;
	context.strokeStyle=gradient;
	context.translate(800,380);
	context.rotate(30*i*Math.PI/180);
	context.beginPath();
	context.moveTo(0,-240);
	context.arc(0,-245, 10, 0, 2*Math.PI, false);
	context.closePath();
    context.fill();
	context.stroke();
	context.restore();
  }  

  //设置字体
  context.save();
  context.translate(800,380);
  context.fillStyle="#f4f4ea";
  context.fillRect(-10,-255,20,20);
  context.fillRect(-10,240,20,20);
  context.fillRect(-255,-10,20,20);
  context.fillRect(235,-10,20,20);
  context.beginPath();
  context.font="bold 80px Arial";
  context.textAlign="center";
  context.textBaseline="middle";
  context.fillStyle="#96968c";
  context.fillText("12",0,-245);
  context.fillText("3",245,0);
  context.fillText("6",0,245);
  context.fillText("9",-245,0);
  context.closePath();
  context.restore();
  
  
  //时针
  context.save();
  context.lineWidth = 10 ;
  context.strokeStyle="#554a44"
  
  context.shadowColor="#cecac4";
  context.shadowBlur=5;
  context.shadowOffsetX=8;
  context.shadowOffsetY=8;
  context.translate(800,380);
  /*旋转元素*/
  context.rotate(hour*30*Math.PI/180); 
  context.beginPath();
  context.moveTo(0, 15);
  context.lineTo(0, -100);
  context.stroke();
  context.closePath();
  context.restore();//将旋转后的元素放回画布
  
  
  //分针
  context.save();
  context.lineWidth = 10 ;
  context.strokeStyle="#554a44";
  context.shadowColor="#cecac4";
  context.shadowBlur=5;
  context.shadowOffsetX=8;
  context.shadowOffsetY=8;
  context.translate(800,380);
  context.rotate(minute*6*Math.PI/180);
  context.beginPath();
  context.moveTo(0, 15);
  context.lineTo(0, -215);
  context.stroke();
  context.closePath();
  context.restore();
  
  //秒针
  context.save();
  context.strokeStyle="#de896f";
  context.shadowColor="#cecac4";
  context.shadowBlur=5;
  context.shadowOffsetX=8;
  context.shadowOffsetY=8;
  context.translate(800,380);
  context.rotate(seconds*6*Math.PI/180);
  context.beginPath();
  context.moveTo(0, 15);
  context.lineTo(0, -160);
  context.lineWidth=4;
  context.stroke();
  context.closePath();
  context.restore();
  
  //指针焦点的圈圈
  context.beginPath();
  context.moveTo(810,380);
  context.arc(800,380, 10,  0, 2*Math.PI, false);
  gradient=context.createRadialGradient(800,380,3,800,380,10);
  gradient.addColorStop(0,"#e4e3e3");
  gradient.addColorStop(1,"#8a8987"); 
  context.fillStyle=gradient;
  context.fill();
  context.lineWidth=2;
  context.strokeStyle="#554a44";
  context.stroke();
  context.closePath();
}


</script>
</body>
</html>

lhh_12345

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小项目-canvas写时钟

my first canvas projectbody{ width:100%;height:100%; background:#ac9f94;}#drawing{display:block;margin:40px auto 0 auto; background:#ac9f94;}你看不见图片的时候就会看见我 //第一步找到canvasvar drawing=docume
复制链接

扫一扫

专栏目录