canvas繪圖之鐘表

舊巷老友發表於2019-02-23

前言

最近公司做專案用到了統計圖一些東西，我當然用的是第三方類庫，週末在家沒事想起了canvas繪圖，就熟悉了一下並做了一個鐘錶的小例子，如圖：

雖然樣子醜點，但是該有的功能一點都不少，接下來就說下怎樣實現的。

介紹canvas

現在大部分瀏覽器都支援canvas，使用canvas前要新建個畫布，就是這樣

<canvas id="myCanvas" width="200" height="100"></canvas>
複製程式碼

然後再說一些常用的屬性和方法：

顏色和樣式

fillStyle 設定或返回用於填充繪畫的顏色、漸變或模式
strokeStyle 設定或返回用於筆觸的顏色、漸變或模式
shadowColor 設定或返回用於陰影的顏色

矩形

rect() 建立矩形
fillRect() 繪製“被填充”的矩形
strokeRect() 繪製矩形（無填充）
clearRect() 在給定的矩形內清除指定的畫素

路徑

fill() 填充當前繪圖（路徑）
stroke() 繪製已定義的路徑
beginPath() 起始一條路徑，或重置當前路徑
moveTo() 把路徑移動到畫布中的指定點，不建立線條
closePath() 建立從當前點回到起始點的路徑
lineTo() 新增一個新點，然後在畫布中建立從該點到最後指定點的線條
clip() 從原始畫布剪下任意形狀和尺寸的區域
quadraticCurveTo() 建立二次貝塞爾曲線
bezierCurveTo() 建立三次方貝塞爾曲線
arc() 建立弧/曲線（用於建立圓形或部分圓）
arcTo() 建立兩切線之間的弧/曲線
isPointInPath() 如果指定的點位於當前路徑中，則返回 true，否則返回 false

文字

font 設定或返回文字內容的當前字型屬性
textAlign 設定或返回文字內容的當前對齊方式
textBaseline 設定或返回在繪製文字時使用的當前文字基線
fillText() 在畫布上繪製“被填充的”文字
strokeText() 在畫布上繪製文字（無填充）
measureText() 返回包含指定文字寬度的物件

影象繪製

drawImage() 向畫布上繪製影象、畫布或視訊

今天用到的暫時就這麼多。

繪製鐘錶

首先新建一個html檔案，新建畫板並且給畫板增加些樣式，就像這樣

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>鐘錶</title>
        <style>
	#canvas {
	    border: 1px solid #000;
	    margin: 0 auto;
	    display: block;
	}
        </style>
    </head>
    <body>
	<!-- 新建畫板 -->
	<canvas id="canvas" width="400" height="400"></canvas>
    </body>
</html>
複製程式碼

然後開始操作canvas,

//獲取canvas標籤，並且建立 context 物件
var canvas = document.getElementById('canvas'),
	context = canvas.getContext('2d'),
	deg = Math.PI/180;
context.translate(200,200);	複製程式碼

說明：getContext(“2d”) 物件是內建的 HTML5 物件，擁有多種繪製路徑、矩形、圓形、字元以及新增影象的方法，deg計算圓周率，translate() 畫布的位置

建立錶盤、數字、刻度、中心點

建立錶盤

context.beginPath();
context.arc(0, 0, 150, 0, 360 * deg);
context.lineWidth = 3;
context.stroke();
context.closePath();
複製程式碼

建立數字

//建立數字
for (var i = 1; i <= 12; i++) {
  context.beginPath();
  context.save();
  context.rotate(30 * i * deg);
  context.textAlign = 'center';
  if (i % 3 == 0) {
      context.fillStyle = 'red';
      context.font = "normal 28px arial";
      context.fillText(i, 0, -110);
  } else {
      context.font = "normal 20px arial";
      context.fillText(i, 0, -120);
  }
  context.restore();
  context.closePath();
}
複製程式碼

建立刻度

for (var i = 1; i <= 60; i++) {
    context.beginPath();
    context.save();
    context.rotate(6 * i * deg);
    context.moveTo(0, -150);
    //判斷刻度顯示顏色
    if (i % 15 == 0) {
        context.strokeStyle = 'red';
        context.lineWidth = 3;
        context.lineTo(0, -135);
        context.stroke();
    } else if (i % 5 == 0) {
        context.strokeStyle = 'orange';
        context.lineWidth = 2;
        context.lineTo(0, -140);
        context.stroke();
    } else {
        context.strokeStyle = '#000';
        context.lineWidth = 1;
        context.lineTo(0, -145);
        context.stroke();
    }
    context.restore();
    context.closePath();
}
複製程式碼

建立中心點

 context.beginPath();
 context.arc(0, 0, 5, 0, 360 * deg);
 context.fill();
 context.closePath();
複製程式碼

如圖：

建立指標

var nowdate = new Date(),
     hour = nowdate.getHours() % 12,
     minu = nowdate.getMinutes(),
     second = nowdate.getSeconds();
 var ms = nowdate.getMilliseconds(); //毫秒
 //秒針
 context.beginPath();
 context.save();
 context.lineWidth = 1;
 context.strokeStyle = 'red';
 //context.rotate(6*second*deg);
 context.rotate((ms / 1000 + second) * 6 * deg);
 context.moveTo(0, 20);
 context.lineTo(0, -130);
 context.stroke();
 context.restore();
 context.closePath();
 //分針
 context.beginPath();
 context.save();
 context.lineWidth = 2;
 context.strokeStyle = 'orange';
 //context.rotate((second/60+minu)*6*deg);
 context.rotate((ms / 1000 / 60 + second / 60 + minu) * 6 * deg);
 context.moveTo(0, 10);
 context.lineTo(0, -120);
 context.stroke();
 context.restore();
 context.closePath();
 //時針
 context.beginPath();
 context.save();
 context.lineWidth = 3;
 context.strokeStyle = '#000';
 //context.rotate((second/3600+minu/60+hour)*30*deg);
 context.rotate((ms / 1000 / 60 / 60 + second / 60 / 60 + minu / 60 + hour) * 30 * deg);
 context.moveTo(0, 0);
 context.lineTo(0, -110);
 context.stroke();
 context.restore();
 context.closePath();
複製程式碼

如圖：

是不是以為到現在就結束了，我大聲的告訴大家沒有，現在才是剛剛開始，接下來就是見證奇蹟的時刻。。。

最後完成

我們需要把上邊的繪製封裝成方法，然後不停的繪製不停的清除這樣鐘錶就動起來了

function dialPlate() { //建立錶盤
    //context.clearRect(-150,-150,400,400);//清除畫布
    context.beginPath();
    context.arc(0, 0, 150, 0, 360 * deg);
    context.lineWidth = 3;
    context.stroke();
    context.closePath();
    //建立刻度
    for (var i = 1; i <= 60; i++) {
        context.beginPath();
        context.save();
        context.rotate(6 * i * deg);
        context.moveTo(0, -150);
        if (i % 15 == 0) {
            context.strokeStyle = 'red';
            context.lineWidth = 3;
            context.lineTo(0, -135);
            context.stroke();
        } else if (i % 5 == 0) {
            context.strokeStyle = 'orange';
            context.lineWidth = 2;
            context.lineTo(0, -140);
            context.stroke();
        } else {
            context.strokeStyle = '#000';
            context.lineWidth = 1;
            context.lineTo(0, -145);
            context.stroke();
        }
        context.restore();
        context.closePath();
    }
    //建立數字
    for (var i = 1; i <= 12; i++) {
        context.beginPath();
        context.save();
        context.rotate(30 * i * deg);
        context.textAlign = 'center';
        if (i % 3 == 0) {
            context.fillStyle = 'red';
            context.font = "normal 28px arial";
            context.fillText(i, 0, -110);
        } else {
            context.font = "normal 20px arial";
            context.fillText(i, 0, -120);
        }
        context.restore();
        context.closePath();
    }
    //中心點
    context.beginPath();
    context.arc(0, 0, 5, 0, 360 * deg);
    context.fill();
    context.closePath();
}

function Pointer() { //建立指標
    var nowdate = new Date(),
        hour = nowdate.getHours() % 12,
        minu = nowdate.getMinutes(),
        second = nowdate.getSeconds();
    var ms = nowdate.getMilliseconds(); //毫秒
    //秒針
    context.beginPath();
    context.save();
    context.lineWidth = 1;
    context.strokeStyle = 'red';
    //context.rotate(6*second*deg);
    context.rotate((ms / 1000 + second) * 6 * deg);
    context.moveTo(0, 20);
    context.lineTo(0, -130);
    context.stroke();
    context.restore();
    context.closePath();
    //分針
    context.beginPath();
    context.save();
    context.lineWidth = 2;
    context.strokeStyle = 'orange';
    //context.rotate((second/60+minu)*6*deg);
    context.rotate((ms / 1000 / 60 + second / 60 + minu) * 6 * deg);
    context.moveTo(0, 10);
    context.lineTo(0, -120);
    context.stroke();
    context.restore();
    context.closePath();
    //時針
    context.beginPath();
    context.save();
    context.lineWidth = 3;
    context.strokeStyle = '#000';
    //context.rotate((second/3600+minu/60+hour)*30*deg);
    context.rotate((ms / 1000 / 60 / 60 + second / 60 / 60 + minu / 60 + hour) * 30 * deg);
    context.moveTo(0, 0);
    context.lineTo(0, -110);
    context.stroke();
    context.restore();
    context.closePath();
}

dialPlate();
Pointer();
setInterval(function(){
	dialPlate();
	Pointer();
},1000/60)
複製程式碼

說明：動畫每秒執行60次是最好的，所以定時器才讓他沒秒執行60次。
到現在是真結束了，一個簡單的canvas繪製鐘錶就完成了。希望可以到專案上點一個 star 作為你對這個專案的認可與支援，謝謝。聽說長的帥的小哥哥和長的漂亮的小姐姐都會點讚的。

專案地址：github.com/Mr-MengBo/C…

Flutter Canvas學習之繪圖篇
2021-05-30
FlutterCanvas繪圖
Android 繪圖——Canvas
2017-12-26
Android繪圖Canvas
Canvas 繪製雷達圖
2019-05-28
Canvas
【javascript】Canvas繪圖詳解
2017-12-29
JavaScriptCanvas繪圖
canvas繪製圓盤走動鐘錶效果
2018-09-09
Canvas
canvas繪製鐘錶效果程式碼例項
2017-02-13
Canvas
Android 中 Canvas 繪圖之 Shader 使用圖文詳解
2016-07-22
AndroidCanvas繪圖
Android中Canvas繪圖之Shader使用圖文詳解
2016-01-15
AndroidCanvas繪圖
canvas 例項之鬧鐘
2020-12-16
Canvas
Canvas(3)---繪製餅狀圖
2020-04-24
Canvas
canvas繪製圓形鐘錶程式碼例項
2018-05-11
Canvas
canvas圖表(3) - 餅圖
2017-11-23
Canvas
canvas繪製圖片drawImage學習
2020-09-13
Canvas
Android 中 Canvas 繪圖之 PorterDuffXfermode 使用及工作原理詳解
2016-07-22
AndroidCanvas繪圖
Android中Canvas繪圖之PorterDuffXfermode使用及工作原理詳解
2016-01-11
AndroidCanvas繪圖
流水賬系列之Canvas繪製-02
2019-03-21
Canvas
Android中Canvas繪圖之MaskFilter圖文詳解（附原始碼下載）
2015-11-17
AndroidCanvas繪圖Filter原始碼
canvas圖表(2) - 折線圖
2017-11-21
Canvas
canvas圖表(1) - 柱狀圖
2017-11-13
Canvas
canvas核心技術-如何繪製圖形
2019-03-03
Canvas
小程式的canvas繪圖的封裝
2018-09-17
Canvas繪圖封裝
小程式canvas居中剪裁繪製圖片
2018-05-23
Canvas
H5的canvas繪圖技術
2017-09-12
H5Canvas繪圖
HTML5使用canvas繪製圖形
2015-09-27
HTMLCanvas
canvas 繪製圖案是重疊繪製而不是重置
2018-09-29
Canvas
canvas繪製圖案是重疊繪製而不是重置
2018-09-29
Canvas
向量插圖設計繪製Canvas X Draw
2022-07-29
Canvas
Zwibbler—前端Canvas繪圖工具使用記錄
2022-03-29
前端Canvas繪圖
canvas 繪製的圖片，進行上傳
2018-06-25
Canvas
微信小程式 canvas 繪圖問題總結
2018-07-08
微信小程式Canvas繪圖
WPF基礎：在Canvas上繪製圖形
2024-04-16
Canvas
canvas 繪製矩形
2018-08-10
Canvas
canvas 繪製扇形
2018-08-10
Canvas
canvas 繪製文字
2018-08-10
Canvas
canvas實現的鐘表效果程式碼例項
2017-02-10
Canvas
【Android繪圖】繪圖之基礎篇（一）
2019-04-28
Android繪圖
canvas在H5中的繪圖總結
2019-02-26
CanvasH5繪圖
canvas核心技術-如何繪製圖片和文字
2018-07-27
Canvas