canvas繪圖之鐘表

時間 2019-11-16

標籤 canvas 繪圖鐘錶简体版

原文原文鏈接

前言

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

雖然樣子醜點，可是該有的功能一點都很多，接下來就說下怎樣實現的。
css

介紹canvas

如今大部分瀏覽器都支持canvas，使用canvas前要新建個畫布，就是這樣html

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

而後再說一些經常使用的屬性和方法：java

顏色和樣式

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() 向畫布上繪製圖像、畫布或視頻

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

繪製鐘錶

首先新建一個html文件，新建畫板而且給畫板增長些樣式，就像這樣github

<!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

//獲取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…

相關標籤/搜索

每日一句

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