利用H5api實現(xiàn)時鐘的繪制(javascript)

更新時間：2020年09月13日 17:27:56 作者：weixin_44359232

這篇文章主要為大家詳細(xì)介紹了利用H5api實現(xiàn)時鐘的繪制，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

HTML5的canvas標(biāo)簽用于繪制圖像（通過腳本，通常是 JavaScript）。不過，canvas元素本身并沒有繪制能力（它僅僅是圖形的容器）必須使用腳本來完成實際的繪圖任務(wù)。

下面，具體總結(jié)了一下使用畫布canvas的步驟：

畫布：

canvas

在頁面上規(guī)劃出一塊空間，canvas標(biāo)簽，通過javascript控制畫布完成繪制

1.獲取畫布

var canvas=document.getElementById("");

2.獲取上下文對象（獲取畫筆）

var cx=canvas.getContext(“2d”);

3.設(shè)置畫筆樣式

cx.fillStyle=‘red';
cx.strokeStyle=‘blue';

4.開始繪制

下面是對于canvas使用，繪制一個簡單鐘表的小例子：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <script>
 window.onload=function(){
  //1.獲取畫布
  var canvas=document.getElementById("canvas");
  //2.獲取畫筆
  var cx=canvas.getContext("2d");
  
  function clock(){
  //3.設(shè)置畫筆樣式
  cx.fillStyle="orange";
  //4.繪制圖形
  //繪制表盤
  cx.beginPath();
  cx.arc(300,300,200,0,Math.PI*2)
  cx.closePath();
  cx.fill();
  //繪制時刻度
  cx.lineWidth=2;
  cx.strokeStyle="black";
  for(var i=0;i<12;i++){
   cx.save();
   cx.translate(300,300);
   cx.rotate(i*(Math.PI/6));
   // cx.beginPath();
   cx.moveTo(0,-180);
   cx.lineTo(0,-200);
   // cx.closePath();
   cx.stroke();
   cx.fillStyle="black";
   cx.font="16px blod";
   cx.rotate(Math.PI/6)
   cx.fillText(i+1,-5,-220);
   cx.restore();
  }
  //繪制分刻度
  for(var i=0;i<60;i++){
   cx.save();
   cx.translate(300,300);
   cx.rotate(i*(Math.PI/30));
   cx.beginPath();
   cx.moveTo(0,-190);
   cx.lineTo(0,-200);
   cx.closePath();
   cx.stroke();
   cx.restore();
  }
  //獲取當(dāng)前時間
  var today=new Date();
  var hour=today.getHours();
  var min=today.getMinutes();
  var sec=today.getSeconds();
  hour=hour+min/60;
  //繪制時針
  cx.lineWidth=5;
  cx.save();
  cx.beginPath();
  cx.translate(300,300);
  cx.rotate(hour*(Math.PI/6));
  cx.moveTo(0,10);
  cx.lineTo(0,-100);
  cx.closePath();
  cx.stroke();
  cx.restore();
  //繪制分針
  cx.lineWidth=3;
  cx.save();
  cx.beginPath();
  cx.translate(300,300);
  cx.rotate(min*(Math.PI/30));
  cx.moveTo(0,10);
  cx.lineTo(0,-120);
  cx.closePath();
  cx.stroke();
  cx.restore();
  //繪制秒針
  cx.lineWidth=1;
  cx.strokeStyle="red";
  cx.save();
  cx.beginPath();
  cx.translate(300,300);
  cx.rotate(sec*(Math.PI/30));
  cx.moveTo(0,10);
  cx.lineTo(0,-160);
  cx.closePath();
  cx.stroke();
  cx.restore();
  //繪制交叉處
  cx.fillStyle="#ccc";
  cx.strokeStyle="red";
  cx.save();
  cx.translate(300,300);
  cx.beginPath();
  cx.arc(0,0,5,0,Math.PI*2);
  cx.closePath();
  cx.fill();
  cx.stroke();
  cx.restore();
   setTimeout(clock,1000);
  }
  clock()
 }
 </script>
</head>
<body>
 <canvas id="canvas" width="600px" height="600px" style="background-color: #ccc;"></canvas>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: