canvas繪製鬧鐘-方法2

時間 2019-12-08

標籤 canvas 繪製鬧鐘方法简体版

原文原文鏈接

<!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(); 就沒有意義，由於沒有已經保存的狀態，致使繪圖有問題。javascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。