效果圖：
步驟：1.canvas是乙個畫圖的容器，裡面沒有圖形，需要你自己加上圖形
先定義好canvas的寬、高
2.定義js函式實現時鐘動畫，具體步驟如下：
1）獲取畫布的id，然後通過getcontext() 方法返回乙個用於在畫布上繪圖的環境。
語法：canvas.getcontext(contextid)。定義好寬、高、半徑。
引數 contextid 指定了您想要在畫布上繪製的型別。當前唯一的合法值是 "2d"，它指定了二維繪
圖，並且導致這個方法返回乙個環境物件，該物件匯出乙個二維繪圖 api。
2）定義好畫圖背景，現將圓畫出來-》在畫上面的數字=》然後畫刻度
a、每畫一部分都需要用beginpath() 方法開始一條路徑，或重置當前的路徑。
b、設定好線寬之後畫圓，畫圓採用arc()函式。arc()建立弧/曲線（用於建立圓形或部分圓）該函式
有五個引數，但這畫了圓還不能顯示出來，所以請使用 stroke() 或 fill() 方法在畫布上繪製實際的
弧。stroke()和fill() 的區別是：stroke()是繪製已定義的路徑，畫線。 而fill()是填充當前繪圖（路
徑）c、畫時鐘上的數字。用陣列儲存數字，因為畫圓是從x軸順時針畫，所以數字是從3開始，所以數
組這樣存數字：var hournumbers=[3,4,5,6,7,8,9,10,11,12,1,2]; 對每乙個數字，根據它的x,y座標
畫，首先計算弧度，然後根據弧度計算x,y。最後採用filltex（）在畫布上繪製「被填充的」文字，
即對應的數字
d、畫對應的刻度。 也是同樣的道理，獲取弧度，根據弧度獲取x,y軸，然後畫刻度。因為每個數
字之間相隔5個點，所以每五個點的顏色不同。
3）畫時針
畫之前先儲存當前狀態，以免受變化後的畫布影響。
先用linewidt畫一條線，再用linecap設定或返回線條的結束端點樣式，通過moveto把路徑移動
到畫布中的指定點。lineto新增乙個新點，然後在畫布中建立從該點到最後指定點的線條,但該方法
並不會建立線條。請使用 stroke() 方法在畫布上繪製確切的路徑。
4）畫分針
與畫時針同樣的方法，但要注意設定不同的樣式
5）畫秒針
與畫分鐘相同的方法
6）畫三根時針上的小圓孔
這樣可以更逼真，小圓孔利用arc()函式實現
7）獲取當前本地時間。通過new乙個date來獲取，now.gethours、now.getminutes()、
getseconds()。再分別呼叫之前定義的函式
8）呼叫setinterval(draw,1000)，每一秒鐘執行一次。實現動畫效果。但是要先執行一次，獲取本
地時間，不然重新整理時會出現一會兒空白。
var dom=document.getelementbyid('clock');
var ctx=dom.getcontext('2d'); //返回乙個用於在畫布上繪圖的環境,該方法返回乙個環境變數
var width=ctx.canvas.width;
var height=ctx.canvas.height;
var r=width/2;
var rem=width/200; //比例因子，當畫布變大或縮小時，指標大小也隨之變化
function drawbackground());
for(i=0;i<60;i++)
else
// sctx.arc(x,y,2,0,2*math.pi,false);
ctx.fill(); }}
function drawhour(hour,minute)
function drawminute(minute)
function drawsecond(second)
function drawdot()
// drawbackground();
function draw()
draw()
setinterval(draw,1000); //每一秒呼叫一次
畫動態時鐘
import cv2 import math import datetime import numpy as np margin 5 上下左右邊距 radius 220 圓的半徑 center center x,center y 225,225 圓心 1.新建乙個畫板並填充成白色 img np.ze...
HTML5 用CANVAS畫時鐘
本篇文章的所有 acdreamers 的 第乙個canvas例項 鐘錶 本文主要是對 中所使用的方法進行詳細說明，雖然原作者在 已經注釋得很清楚了。一 獲取上下文物件 var cxt document.getelementbyid 元素名 getcontect 2d ie8或更早的瀏覽器不支援元素。...
Html5畫布canvas小例
小例中用到了畫布canvas的畫矩形，畫圓或弧，畫線，畫文字，顏色漸變。其全部顏色 字型 圖形都是通過js在canvas上繪製形成，總結了幾個context物件的方法如下 1.畫矩形 fillrect x,y,width,height 矩形左上角點x座標，矩形左上角點y座標,矩形寬度，矩形高度 2....