canvas绘制闹钟-方法2 原

tianyawhl

发布于 2019-04-04 02:00:24

59300

代码可运行

运行总次数：0

代码可运行

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>canvas</title>
    <style>
	#clock{border:1px solid #ccc}
    </style>
</head>

<body>
    <canvas id="clock" width="300" height="300"></canvas>
</body>
 <script type="text/javascript">
  var canvas = document.querySelector("#clock");
  var ctx = canvas.getContext("2d")
  var canvasWidth = ctx.canvas.width;
  var canvasHeight = ctx.canvas.height;
  console.log(canvasWidth,canvasHeight)
  var r = canvasWidth/2;
  var rem = canvasWidth/200 //设置缩放时钟的比例
   
  function drawBackground(){
     ctx.save() 
     ctx.beginPath();
	 ctx.translate(r,r);
	 ctx.strokeStyle = "#257cc0";
	 ctx.lineWidth = 8*rem;
	 ctx.arc(0,0,r-ctx.lineWidth/2,0,2*Math.PI,true) //true是逆时针
	 ctx.stroke() //一定要写，否则不知道是填充还是描边
	 //画数字1-12
	 var hoursNumbers =[3,4,5,6,7,8,9,10,11,12,1,2];
	 ctx.font=18*rem + "px Arial";//除了大小一定要加字体类型
	 ctx.textAlign="center";
	 ctx.textBaseline="middle";
	 hoursNumbers.forEach(function(number,i){
	    
	    var rad = 2*Math.PI/12*i
		var x = Math.cos(rad)*(r-30*rem);
		var 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;
	   var x =Math.cos(rad)*(r-16*rem);
	   var y = Math.sin(rad)*(r-16*rem);
	   ctx.beginPath()
	   if(i%5==0){
	      ctx.fillStyle="#333"
	   }else{
	      ctx.fillStyle="#999"
	   }
	   ctx.arc(x,y,2*rem,0,2*Math.PI,false);
	   ctx.fill()
	 }
  }
  function drawHour(hour,minute){
  ctx.save();
  ctx.beginPath();
  var rad = 2*Math.PI/12*hour;
  var 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();
  }
 function drawMinute(minute){
 ctx.save();
  ctx.beginPath();
  var rad = 2*Math.PI/60*minute;
  ctx.rotate(rad)
  ctx.lineWidth = 4*rem;
  ctx.lineCap ="round";
  ctx.moveTo(0,10*rem);
  ctx.lineTo(0,-r+40*rem)
  ctx.stroke();
  ctx.restore();
  }
  function drawSecond(second){
  ctx.save();
  ctx.beginPath();
  ctx.fillStyle="orange";
  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();
  }
  function drawDot(){
   ctx.beginPath();
   ctx.fillStyle="#fff";
   ctx.arc(0,0,4*rem,0,2*Math.PI,false);
   ctx.fill();
  }
  function draw(){
   ctx.clearRect(0,0,canvasWidth,canvasHeight)
   var now = new Date();
	var hour = now.getHours();
	var minute = now.getMinutes();
	var second = now.getSeconds();
	drawBackground();
	drawHour(hour,minute);
	drawMinute(minute);
	drawSecond(second);
	drawDot();
	ctx.restore();
	window.requestAnimationFrame(draw)
  }
  draw();
  //setInterval(draw,1000);
 </script>
</html>

drawBackground()里面的ctx.save() 为什么不能放到上面的原因：一般ctx.save() 与ctx.restore()是成对出现的。ctx.save() 的作用是保存状态，ctx.restore()指弹出保存的状态来使用，如果此函数中没有ctx.save()，则在draw()中执行ctx.restore(); 就没有意义，因为没有已经保存的状态，导致绘图有问题。

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018/11/12 ，如有侵权请联系 cloudcommunity@tencent.com 删除

canvas