一、介紹Canvas
Canvas 是指定了長度和寬度的矩形畫布，我們將使用新的HTML5 JavaScript，可使用HTML5 JS API 來畫出各種圖形。不過，canvas本身並沒有繪製能力（它僅僅是圖形的容器） - 您必須使用指令碼來完成實際的繪圖任務。
現在大部分瀏覽器都支援canvas，使用canvas前要建立個畫布，就是這樣
<canvas id="myCanvas" width="200" height="100"></canvas>
二、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>canvas畫布</title><style type="text/css">#canvas {border: 1px solid #000;margin: 0 auto;display: block;}</style></head><body><!-- 建立畫板 --><canvas id="canvas" width="400" height="400"></canvas></body></html>
然後開始操作canvas
<script>//擷取canvas標籤，並且建立 context 對象 var canvas = document.getElementById('canvas'),context = canvas.getContext('2d'),deg = Math.PI / 180;context.translate(200, 200);</script>
說明：getContext(“2d”) 對象是內建的 HTML5 對象，擁有多種繪製路徑、矩形、圓形、字元以及添加映像的方法，deg計算圓周率，translate() 畫布的位置。
1.建立錶盤、數字、刻度、中心點
建立錶盤
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();
：
2.建立指標
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();
：
是不是以為到現在就結束了，我大聲的告訴大家沒有，現在才是剛剛開始，接下來就是見證奇蹟的時刻。。。
3.最後完成
我們需要把上邊的繪製封裝成方法，然後不停的繪製不停的清除這樣鐘錶就動起來了
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次。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
