利用H5api實現時鐘的繪製(javascript)

阿新 • • 發佈：2020-09-14

HTML5的canvas標籤用於繪製圖像（通過指令碼，通常是 JavaScript）。不過，canvas元素本身並沒有繪製能力（它僅僅是圖形的容器）必須使用指令碼來完成實際的繪圖任務。

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

畫布：

canvas

在頁面上規劃出一塊空間，canvas標籤，通過javascript控制畫布完成繪製

1.獲取畫布

var canvas=document.getElementById("");

2.獲取上下文物件（獲取畫筆）

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

3.設定畫筆樣式

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.設定畫筆樣式
    cx.fillStyle="orange";
    //4.繪製圖形
    //繪製錶盤
    cx.beginPath();
    cx.arc(300,300,200,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();
    }
    //獲取當前時間
    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,-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,-160);
    cx.closePath();
    cx.stroke();
    cx.restore();
    //繪製交叉處
    cx.fillStyle="#ccc";
    cx.strokeStyle="red";
    cx.save();
    cx.translate(300,300);
    cx.beginPath();
    cx.arc(0,5,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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。