有趣的編程案例：用Html5 Canvas開發一個時

有趣的編程案例：用Html5 Canvas開發一個時鐘（圖文版）

用canvas做的一個時鐘，先看效果

1、繪制時鐘圓盤

繪制時鐘圓盤，其實就是繪制一個圓，這個比較簡單，代碼如下：

2、標繪刻度

標繪刻度的難點在于確定刻度點的位置，這需要用到一些的幾何知識，圓弧和三角函數。

如上圖，要求圓上任意一點A的位置，通過三角函數可以推出：

x1=BC=cos(a)*AC
y1=BC=sin(a)*AC

其中AC就是半徑，是已知的

現在我們要來確定角a的度數：

小時刻度：12個刻度，每一小時的角度為：360/12，弧度為：2π/12
分鐘刻度：60個刻度，每一分鐘的角度為：360/60，弧度為：2π/60

有了半徑和角度我們就可以算出坐標，這樣就可以繪制刻度了。注意js里面用的是弧度。

為了方便，我們用ctx.translate()把畫布原點重定向到了圓心，這改變了畫布的狀態，為了不影響后續的繪制，每次繪完之后都要把畫布恢復為原來的狀態，具體操作就是：重定向畫布原點之前，用ctx.save()保存畫布狀態，繪制完成之后，用ctx.restore()恢復之前保存的畫布狀態。

//保存畫布當前環境狀態
ctx.save();
//重定向畫布原點
ctx.translate(250,250);
//繪制代碼......
//恢復之前保存的狀態
ctx.restore();

繪制小時刻度代碼

同理，繪制分鐘刻度就簡單，把12換成60就可以了。

繪制分鐘刻度代碼

3、畫時針

時針、分針、秒針都是和當前時間有關，所以先要獲取當前時間的小時數、分鐘數、秒數。

//得到當前時間
var now=new Date();
//當前小時數
var hour=now.getHours();
//當前分鐘數
var minute=now.getMinutes();
//當前秒數
var second=now.getSeconds();
hour=hour+minute/60;

畫時針時，我們先畫出指向12點的時針：

//指向12點的時針
ctx.beginPath();
ctx.lineWidth=8;
ctx.lineCap="round";
ctx.moveTo(0,10);
ctx.lineTo(0,-120);
ctx.stroke()

之后每一個時刻度點的時針就是把指向12點的時針旋轉一定的度數：

//旋轉度數
ctx.rotate(hour*2*Math.PI/12);

繪制時針代碼

同理，時針繪制好之后，分針和秒針也就簡單，直接看代碼。

繪制分針代碼

繪制秒針代碼

為了好看我們再畫一個中心點。

繪制中心點代碼

最后，為了讓時鐘實時轉動，需要加一個定時任務，每秒執行一次。

//一秒鐘執行一次
setInterval(clock,1000);

還要注意，每次重繪都要清除畫布：

 ctx.clearRect(0,0,canvas.width,canvas.height);

最終完整的代碼邏輯如下：

這樣一個時鐘就完成了，如果想看更詳細的操作，推薦觀看視頻版。

文較長，適合收藏，慢慢研讀分析。

===========

一、開篇說明：

1.推薦指數：★★★★★

2.衷心感謝：原作者：執念執戰（王成程）

3.代碼說明：在原作者的基礎上進行代碼的整合、刪減、增加、潤色、注釋，分享出來，僅供學習。

4.仿抖音網紅文字時鐘，目前有app可以下載，網上也有html和css的免費代碼下載，python的很少，這怎么能讓python缺席呢？

html代碼實現的，網上有免費代碼下載

==========================

二、python的pygame實現的效果圖：

1.圖：

2，非常漂亮。

★3.提前準備：★

3.1 python3以上，推薦python3.8

3.2 微軟編輯器vscode

3.3 下載自己喜歡的字體，本文中hwfs=華文仿宋

3.4 二進制文件‘HZK16’，需要自己去下載。

請大家搜索原作者的博客（執念執戰），也是對原作者的尊重，我故意留下一個小bug。

=============

三，代碼及分析：

1.第1步：

#---第1步---導出模塊---
from math import *
import pygame
from pygame.locals import *
import time
import sys
import binascii  #任意中文字符時使用到此庫
import math

2.第2步：

#---第2步---初始化定義---
#字符倍數比例函數，修改次數據可以實現整體的放大和縮小，建議此數值在0.8-1.3 之間，看起來比較合適
fontmultiple=1
#屏幕的寬和高，圓心坐標是屏幕大小的一半
SCREEN_X_MAX=int(1500*fontmultiple) 
SCREEN_Y_MAX=int(1500*fontmultiple) 
#游戲初始化
pygame.init()
#本人喜歡加RESIZABLE,屏幕大小
screen=pygame.display.set_mode((SCREEN_X_MAX,SCREEN_Y_MAX),RESIZABLE)
FOCAL_DISTANCE=512 #透視模型

3.第3步：

#---第3步---顏色定義---
BLACK=(0,0,0)
WHITE=(255,255,255)
RED=(255,0,0)
GREEN=(0,255,0)
BLUE=(0,0,255)
ForeColor=RED #前景色和背景色
BackColor=BLACK
#中文字體，可以自己下載，hwfs=hwfs
font=pygame.font.Font('hwfs.ttf', 36)

4.第4步：原作者是放入一個py文件（Transform3D.py），用模塊一樣導出，我將他整合進去，刪除不需要的部分。

#---第4步---3d相關定義---
#定義畫點函數---need
def Gui_Point(x,y,color):
    pygame.draw.line(screen,color,(int(x),int(y)),(int(x+1),int(y)),2)

#定義坐標結構體類---need
class zuobiaostruct:
    def __init__(self):
        self.x=0
        self.y=0
        self.z=0

#矩陣相乘函數---need
def MATRIX_multiply(MAT1,MAT2):
    newMAT=[[0.0 for i in range(4)] for n in range(4)]
    for a in range(4):
        for b in range(4):
            newMAT[a][b]=MAT1[a][0]*MAT2[0][b]+MAT1[a][1]*MAT2[1][b]+MAT1[a][2]*MAT2[2][b]+MAT1[a][3]*MAT2[3][b]    
    return newMAT

#矢量與矩陣相乘函數---need
def vector_matrix_MULTIPLY(Source,MAT):
    Result=zuobiaostruct()
    Result.x=Source.x*MAT[0][0]+Source.y*MAT[1][0]+Source.z*MAT[2][0]+MAT[3][0]
    Result.y=Source.x*MAT[0][1]+Source.y*MAT[1][1]+Source.z*MAT[2][1]+MAT[3][1]
    Result.z=Source.x*MAT[0][2]+Source.y*MAT[1][2]+Source.z*MAT[2][2]+MAT[3][2]
    return Result 

#構造單位矩陣函數
def structure_3D():
    MAT=[[0.0 for i in range(4)] for i  in range(4)]
    MAT[0][0]=1.0
    MAT[0][1]=0.0
    MAT[0][2]=0.0
    MAT[0][3]=0.0    #// 1 0 0 0 
    MAT[1][0]=0.0
    MAT[1][1]=1.0
    MAT[1][2]=0.0
    MAT[1][3]=0.0    #// 0 1 0 0
    MAT[2][0]=0.0
    MAT[2][1]=0.0
    MAT[2][2]=1.0
    MAT[2][3]=0.0   #// 0 0 1 0
    MAT[3][0]=0.0
    MAT[3][1]=0.0
    MAT[3][2]=0.0
    MAT[3][3]=1.0    #// 0 0 0 1    
    return MAT
    
#平移變換矩陣函數---need
def Translate3D(MAT,tx, ty, tz):
    tMAT=[[0.0 for i in range(4)] for i  in range(4)]
    tMAT[0][0]=1
    tMAT[0][1]=0
    tMAT[0][2]=0
    tMAT[0][3]=0	#//	1 0 0 tx
    
    tMAT[1][0]=0
    tMAT[1][1]=1
    tMAT[1][2]=0
    tMAT[1][3]=0	#//	0 1 0 ty
	
    tMAT[2][0]=0
    tMAT[2][1]=0
    tMAT[2][2]=1
    tMAT[2][3]=0	#//	0 0 1 tz
    
    tMAT[3][0]=tx
    tMAT[3][1]=ty
    tMAT[3][2]=tz
    tMAT[3][3]=1;	#//	0 0 0 1

    return MATRIX_multiply(MAT,tMAT)#//相乘

#比例(scale)變換矩陣函數---need
def   Scale_3D( MAT, sx, sy, sz):
    tMAT=[[0.0 for i in range(4)] for i  in range(4)]
    tMAT[0][0]=sx
    tMAT[0][1]=0
    tMAT[0][2]=0
    tMAT[0][3]=0	#//	sx0 0 0 
    tMAT[1][0]=0
    tMAT[1][1]=sy
    tMAT[1][2]=0
    tMAT[1][3]=0	#//	0 sy0 0
    tMAT[2][0]=0
    tMAT[2][1]=0
    tMAT[2][2]=sz
    tMAT[2][3]=0    #//	0 0 sz0
    tMAT[3][0]=0
    tMAT[3][1]=0
    tMAT[3][2]=0
    tMAT[3][3]=1	#//	0 0 0 1
    return MATRIX_multiply(MAT,tMAT) #	//相乘

#旋轉變換矩陣函數---need
def  Rotate_3D( MAT, ax, ay, az):
    MAT1=[[0.0 for i in range(4)] for i  in range(4)]
    MAT2=[[0.0 for i in range(4)] for i  in range(4)]
    MATx=[[0.0 for i in range(4)] for i  in range(4)]
    MATy=[[0.0 for i in range(4)] for i  in range(4)]
    MATz=[[0.0 for i in range(4)] for i  in range(4)]

    ax=(3.1415926*ax)/180.0	#//角度轉換為弧度量
    ay=(3.1415926*ay)/180.0
    az=(3.1415926*az)/180.0
    
    #*****************************繞x軸旋轉********************************************

    MATx[0][0]=1
    MATx[0][1]=0
    MATx[0][2]=0
    MATx[0][3]=0    #//1  0		0	   0
    MATx[1][0]=0
    MATx[1][1]=cos(ax)
    MATx[1][2]=-sin(ax)
    MATx[1][3]=0    #//0  cos(ax)	-sin(ax)   0
    MATx[2][0]=0
    MATx[2][1]=sin(ax)
    MATx[2][2]=cos(ax)
    MATx[2][3]=0    #//0  sin(ax)	cos(ax)    0	
    MATx[3][0]=0
    MATx[3][1]=0
    MATx[3][2]=0
    MATx[3][3]=1    #//0  0		 0	   1

    #*****************************繞y軸旋轉********************************************
    MATy[0][0]=cos(ay)
    MATy[0][1]=0
    MATy[0][2]=sin(ay)
    MATy[0][3]=0    #//cos(ay)	0	sin(ay)		0
    MATy[1][0]=0
    MATy[1][1]=1
    MATy[1][2]=0
    MATy[1][3]=0    #//	0	1	0		0
    MATy[2][0]=-sin(ay)
    MATy[2][1]=0
    MATy[2][2]=cos(ay)
    MATy[2][3]=0    #//	-sin(ay)	0		cos(ay) 0
    MATy[3][0]=0
    MATy[3][1]=0
    MATy[3][2]=0
    MATy[3][3]=1    #// 0 	0	0		1

    #*****************************繞z軸旋轉********************************************
    MATz[0][0]=cos(az)
    MATz[0][1]=-sin(az)
    MATz[0][2]=0
    MATz[0][3]=0    #//cos(az)	-sin(az)	0		0
    MATz[1][0]=sin(az)
    MATz[1][1]=cos(az)
    MATz[1][2]=0
    MATz[1][3]=0    #//	sin(az)	cos(az)		0		0
    MATz[2][0]=0
    MATz[2][1]=0
    MATz[2][2]=1
    MATz[2][3]=0    #//	0	  0		1		0
    MATz[3][0]=0
    MATz[3][1]=0
    MATz[3][2]=0
    MATz[3][3]=1    #// 0 	  0		0		1

    MAT1=MATRIX_multiply(MAT,MATx)
    MAT2=MATRIX_multiply(MAT1,MATy)	
    return MATRIX_multiply(MAT2,MATz)	

#透視投影（Perspective projection）---need
def PerProject( Space,  XO,  YO):
    Screen=zuobiaostruct()
    if (Space.z==0):
        Space.z=0.01		#//被除數不能為零
    Screen.x=(int)(FOCAL_DISTANCE*Space.x /(Space.z+FOCAL_DISTANCE)+XO)
    Screen.y=(int)(FOCAL_DISTANCE*Space.y /(Space.z+FOCAL_DISTANCE)+YO)
    return Screen

#顯示3D的16x16字符---need
def Show3D16x16Char(font,ax,ay,az,x,y,Z_Size,frontcolor,backcolor,model=1.5,fontmultiple=1.0):

    length=len(font)
    if length==0:#字符數要大于一個
        return 
    if length==1: #只支持一個字符的顯示
        text=font
    else:
        text=font[0]

    m=0
    i=0
    k=0
    j=0
    XO=0
    YO=0
    
    gMAT=[[0.0 for i in range(4)]  for n in range(4)]
    Point0=zuobiaostruct()
    Point1=zuobiaostruct()
    PointDis=zuobiaostruct()
    
    gMAT=structure_3D()                        #//構建單位矩陣
    gMAT=Translate3D(gMAT,-8,-8,-8);         #//平移變換矩陣
    gMAT=Scale_3D(gMAT,fontmultiple,fontmultiple,fontmultiple);                #//比例變換矩陣
    gMAT=Rotate_3D(gMAT,ax,ay,az);            #//旋轉變換矩陣
    
    for m in range(length): #理論上就是將單個的字符延長為多個字符，最重要的就是坐標的確定和計算
        text=font[m]
        gb2312=text.encode('gb2312')
        hex_str=binascii.b2a_hex(gb2312)
        result=str(hex_str,encoding='utf-8' )  #換算出漢字對應的字符地址
        if eval('0x' + result[:2]) <128:
            return
        else:
            area=eval('0x' + result[:2]) - 0xA0
            index=eval('0x' + result[2:]) - 0xA0 #換算為16進制地址
            offset=(94 * (area - 1)+ (index - 1))*32  #得出具體地址
            font_rect=None
            #注意這個文件HZK16，二進制文件需要單獨下載
            with open("/home/xgj/Desktop/漢字時鐘/pyxgj/HZK16","rb") as f: #16x16字符集的地址，從中讀取出一個字符的點陣數據
                f.seek(offset)
                font_rect=f.read(32)#得到32個點陣數據
            f.close()
    
        for i in range(16):
            for k in range(8):
                temp=0x01 << k
                for j in range(2):
                    data=font_rect[i*2+j]  #取出數據
                    if data & temp==temp:
                        Point0.x=16-(k+(1-j)*8)+m*16+m*2 #第m個字符的當前點的坐標
                        
                        #每個字符16個像素，第m個字符共m*16個像素，每兩個字符間的間距設為2，則m*16+m*2，前面的時實現當前點陣坐標的計算
                        Point0.y=i    #(i*8)+k
                        Point0.z=Z_Size        #//此參數能夠改變字符距離旋轉軸中心的距離
                        
                        Point1=vector_matrix_MULTIPLY(Point0,gMAT)#//矢量與矩陣相乘
                        PointDis=PerProject(Point1,XO,YO)       #//映射投影
                        Gui_Point(PointDis.x+x,PointDis.y+y,frontcolor)
                    else:
                        if model==1: #模式為1 時才會繪制底色
                            Point0.x=16-(k+(1-j)*8)+m*16+m*2
                            Point0.y=i #(i*8)+k
                            Point0.z=Z_Size        #//此參數能夠改變字符距離旋轉軸中心的距離
                            
                            Point1=vector_matrix_MULTIPLY(Point0,gMAT)#//矢量與矩陣相乘
                            PointDis=PerProject(Point1,XO,YO)       #//映射投影
                            Gui_Point(PointDis.x+x,PointDis.y+y,backcolor)

5.第5步：我增加了秒的相關定義和設置，在后續中補充秒的部分代碼。

#---第5步---中文標簽定義-------------
Week_zw=("一","二","三","四","五","六","日") #星期的中文
Day_zw=("零","一","二","三","四","五","六","七","八","九","十") #可用于所有需要0-10的中文的地方
Mouth_day=[31,28,31,30,31,30,31,31,30,31,30,31] #月份時長表
#秒
Second_add=['零','一', '二', '三', '四', '五', '六', '七', '八', '九', '十',
            '十一', '十二', '十三', '十四', '十五', '十六', '十七', '十八', '十九',
            '二十','二十一', '二十二', '二十三', '二十四', '二十五', '二十六', '二十七', '二十八', '二十九',
            '三十','三十一', '三十二', '三十三', '三十四', '三十五', '三十六', '三十七', '三十八', '三十九', 
            '四十','四十一', '四十二', '四十三', '四十四', '四十五', '四十六', '四十七', '四十八', '四十九', 
            '五十', '五十一', '五十二', '五十三', '五十四', '五十五', '五十六', '五十七', '五十八', '五十九', 
            ]

6.第6步：這里有增加秒的代碼

#---第6步---相關顯示函數定義---
#顯示年
def Show_Year(x0,y0,r,angel):
    timenow=time.localtime(time.time()) #獲取時間
    yearstr=Day_zw[(int)(timenow[0]/1000)]+Day_zw[int((timenow[0]%1000)/100)]+Day_zw[int((timenow[0]%100)/10)]+Day_zw[int((timenow[0]%10))]+"年"
    Show3D16x16Char(yearstr,0,0,angel-90,x0,y0,1,WHITE,BackColor,0,fontmultiple)

#顯示周（星期）
def Show_Week(x0,y0,r,agl):
    timenow=time.localtime(time.time()) #獲取時間
    for i in range(7):
        angel=360/7
        if i < timenow[6]:
            angel=agl-angel*(timenow[6]-i)
            ForeColor=RED
        elif i >timenow[6]:
            angel=agl+angel*(i-timenow[6])
            ForeColor=RED
        else :
            angel=agl  #當前周設為90度，即在水平方向上
            ForeColor=WHITE
        x1=x0 + r * math.sin(angel * 3.14/180) #由角度計算出當前應在的坐標點
        y1=y0 + r * math.cos(angel * 3.14/180)
        Show3D16x16Char("周"+Week_zw[i],0,0,angel-90,(int)(x1),(int)(y1),1,ForeColor,BackColor,0,fontmultiple)#輸出旋轉后的字符串

#顯示月份
def Show_Month(x0,y0,r,agl):
    timenow=time.localtime(time.time())#獲取時間
    for i in range(1,13): #一年12個月
        angel=360/12
        if i < timenow[1]:
            angel=agl-angel*(timenow[1]-i) #其他月份相應得到角度推算
            ForeColor=GREEN
        elif i >timenow[1]:
            angel=agl+angel*(i-timenow[1])
            ForeColor=GREEN
        else :
            angel=agl  #當前月份設為90度，即在水平方向上
            ForeColor=WHITE
        x1=x0 + r * math.sin(angel * 3.14/180) #由角度計算出當前應在的坐標點
        y1=y0 + r * math.cos(angel * 3.14/180)
        if i>10:
            monthstr=Day_zw[10]+Day_zw[i%10]+"月"  #得出要顯示的字符串
        else:
            monthstr=Day_zw[i]+"月"
        Show3D16x16Char(monthstr,0,0,angel-90,(int)(x1),(int)(y1),1,ForeColor,BackColor,0,fontmultiple)#顯示字符串

#顯示日期
def Show_Day(x0,y0,r,agl):
    timenow=time.localtime(time.time()) #獲取時間
    if (timenow[0]%4==0 and timenow[0]%100 !=0) or (timenow[0]%400==0):
        Mouth_day[1]=29 #閏年，補全二月的時長表
    else:
        Mouth_day[1]=28
        #Mouth_day 為月份的時長表
    for i in range(1,Mouth_day[timenow[1]-1]+1):
        angel=360/Mouth_day[timenow[1]-1]
        if i < timenow[2]:
            angel=agl-angel*(timenow[2]-i)#其他日期相應得到角度推算
            ForeColor=RED
        elif i >timenow[2]:
            angel=agl+angel*(i-timenow[2])
            ForeColor=RED
        else :
            angel=agl  #當前日期設為90度，即在水平方向上
            ForeColor=WHITE
        x1=x0 + r * math.sin(angel * 3.14/180)#由角度計算出當前應在的坐標點
        y1=y0 + r * math.cos(angel * 3.14/180)
        if i>20:
            if i%10 !=0:
                daystr=Day_zw[(int)(i/10) ]+ Day_zw[10] +Day_zw[i%10]+"日"#得出要顯示的字符串
            else:
                daystr=Day_zw[(int)(i/10) ]+ Day_zw[10]+"日"
        elif i>10:
            daystr=Day_zw[10]+Day_zw[i%10]+"日"
        else:
            daystr=Day_zw[i]+"日"
        Show3D16x16Char(daystr,0,0,angel-90,(int)(x1),(int)(y1),1,ForeColor,BackColor,0,fontmultiple)#顯示字符串
        
#顯示時=小時=h
def Show_Hour(x0,y0,r,agl):
    timenow=time.localtime(time.time())#獲取時間
    for i in range(0,24):
        angel=360/24
        if i < timenow[3]:
            angel=agl-angel*(timenow[3]-i)#其他時間相應得到角度推算
            ForeColor=GREEN
        elif i >timenow[3]:
            angel=agl+angel*(i-timenow[3])
            ForeColor=GREEN
        else :
            angel=agl  #當前時間設為90度，即在水平方向上
            ForeColor=WHITE
        x1=x0 + r * math.sin(angel * 3.14/180)
        y1=y0 + r * math.cos(angel * 3.14/180)
        if i>20:
            if i%10 !=0:
                daystr=Day_zw[(int)(i/10) ]+ Day_zw[10] +Day_zw[i%10]+"時"  #得到要顯示的字符串
            else:
                daystr=Day_zw[(int)(i/10) ]+ Day_zw[10]+"時"
        elif i>10:
            daystr=Day_zw[10]+Day_zw[i%10]+"時"
        else:
            daystr=Day_zw[i]+"時"
        Show3D16x16Char(daystr,0,0,angel-90,(int)(x1),(int)(y1),1,ForeColor,BackColor,0,fontmultiple) #顯示角度計算后的字符串

# 顯示分=分鐘=m   
def Show_Min(x0,y0,r,agl):
    timenow=time.localtime(time.time())
    for i in range(0,60):
        angel=360/60
        if i < timenow[4]:
            #將秒數也代入角度計算中就可以得到更精確的角度偏移，而且每秒鐘都會移動，好看
            angel=agl-angel*(timenow[4]-i)-(360/60/60 * timenow[5] ) 
            ForeColor=RED
        elif i > timenow[4]:
            angel=agl + angel * (i-timenow[4]) - (360/60/60 * timenow[5] )
            ForeColor=RED
        else :
            angel=agl - (360/60/60 * timenow[5] )  #當前日期設為90度-秒鐘的角度，實現動態顯示
            ForeColor=WHITE
        x1=x0 + r * math.sin(angel * 3.14/180) #由角度計算出當前應在的坐標點
        y1=y0 + r * math.cos(angel * 3.14/180)
        if i>=20:
            if i%10 !=0:
                daystr=Day_zw[(int)(i/10) ]+ Day_zw[10] +Day_zw[i%10]+"分" #得到要顯示的字符串
            else:
                daystr=Day_zw[(int)(i/10) ]+ Day_zw[10]+"分"
        elif i>10:
            daystr=Day_zw[10]+Day_zw[i%10]+"分"
        else:
            daystr=Day_zw[i]+"分"
        Show3D16x16Char(daystr,0,0,angel-90,(int)(x1),(int)(y1),1,ForeColor,BackColor,0,fontmultiple)#顯示角度計算后的字符串

# 顯示秒=秒針=s   
def Show_Sec(x0,y0,r,agl):
    #獲取時間列表
    timenow=time.localtime(time.time())
    #print(timenow)
    #time.struct_time(tm_year=2020, tm_mon=3, tm_mday=28, tm_hour=9, tm_min=24, tm_sec=18)
    for i in range(0,60):
        angel=360/60
        if i < timenow[5]:
            #有一個bug，如何實現跳一秒走一格，整體轉一圈優雅些，暫時不會。
            angel=agl-angel*(timenow[5]-i)-(360/60 * timenow[5]) 
            ForeColor=GREEN
        elif i > timenow[5]:
            angel=agl + angel * (i-timenow[5])-(360/60 * timenow[5]) 
            ForeColor=GREEN

        else :
            #當前日期設為90度-秒鐘的角度，實現動態顯示
            angel=agl-(360/60 * timenow[5] ) 
            #歸零=o時顯示紅色
            if angel==90:
                ForeColor=RED
            #當前時間為白色
            else:
                ForeColor=WHITE
        #根據秒表動態轉圈
        x1=x0 + r * math.sin(angel * 3.14/180) #由角度計算出當前應在的坐標點
        y1=y0 + r * math.cos(angel * 3.14/180)
        if i>=20:
            if i%10 !=0:
                #加入秒的字符串
                daystr=Second_add[(int)(i/10) ]+ Second_add[10] +Second_add[i%10]+"秒" #得到要顯示的字符串
            else:
                daystr=Second_add[(int)(i/10) ]+ Second_add[10]+"秒"
        elif i>10:
            daystr=Second_add[10]+Second_add[i%10]+"秒"
        else:
            daystr=Second_add[i]+"秒"
        #顯示秒的字符串一圈
        Show3D16x16Char(daystr,0,0,angel-90,(int)(x1),(int)(y1),1,ForeColor,BackColor,0,fontmultiple)#顯示角度計算后的字符串

7.第7步：我增加了打印當前時間的打印文字函數

#---第7步---定義打印屏幕文字函數---
def print_text(font, x, y, text, color=WHITE):
    imgText=font.render(text, True, WHITE)
    screen.blit(imgText, (int(float(x)),int(float(y))))

8.第8步：

#---第8步---游戲循環---
i=0
while True:
    #獲取今天的時間
    timenow=time.localtime(time.time())
    #定義年月日
    years=timenow[0]
    months=timenow[1]
    days=timenow[2]
    #定義時分秒
    #hours=today.hour % 12 #顯示12h制
    hours=timenow[3] % 24 #顯示24h制
    minutes=timenow[4]
    seconds=timenow[5]
    #顯示當前時間,x=400,y=550，為坐標
    print_text(font, 500, 150, '當前時間:'+str(years) +'年'+str(months) +'月'+str(days) 
    +'日'+str(hours) +'時'+ ":" + str(minutes) + '分'+":" + str(seconds)+'秒') 

    #退出設置
    for event in pygame.event.get():
        if event.type in (QUIT,KEYDOWN):
            pygame.quit()
            sys.exit()   
    i+=1

    #當i<90啟動時整體圓盤都要轉動,當≥90時停止
    if i > 90:
        i=90
    
    #圓盤設置
    #坐標點，水平向右坐標定固定顯示白色當前時間；
    Show_Year(SCREEN_X_MAX/2-40*fontmultiple,SCREEN_Y_MAX/2,32,90) #顯示年
    Show_Week(SCREEN_X_MAX/2,SCREEN_Y_MAX/2,65*fontmultiple,180-i) #顯示周
    Show_Month(SCREEN_X_MAX/2,SCREEN_Y_MAX/2,110*fontmultiple,i)    #顯示月份
    Show_Day(SCREEN_X_MAX/2,SCREEN_Y_MAX/2,170*fontmultiple,180-i)  #顯示日期
    Show_Hour(SCREEN_X_MAX/2,SCREEN_Y_MAX/2,245*fontmultiple,i)     #顯示時
    Show_Min(SCREEN_X_MAX/2,SCREEN_Y_MAX/2,325*fontmultiple,180-i)  #顯示分
    Show_Sec(SCREEN_X_MAX/2,SCREEN_Y_MAX/2,425*fontmultiple,180-i)  #顯示秒
    
    #線圈的設置
    pygame.draw.circle(screen,ForeColor,((int)(SCREEN_X_MAX/2),(int)(SCREEN_Y_MAX/2)),int(55*fontmultiple),1) #顯示幾個圓
    pygame.draw.circle(screen,ForeColor,((int)(SCREEN_X_MAX/2),(int)(SCREEN_Y_MAX/2)),int(100*fontmultiple),1)
    pygame.draw.circle(screen,ForeColor,((int)(SCREEN_X_MAX/2),(int)(SCREEN_Y_MAX/2)),int(160*fontmultiple),1)
    pygame.draw.circle(screen,ForeColor,((int)(SCREEN_X_MAX/2),(int)(SCREEN_Y_MAX/2)),int(235*fontmultiple),1)
    pygame.draw.circle(screen,ForeColor,((int)(SCREEN_X_MAX/2),(int)(SCREEN_Y_MAX/2)),int(315*fontmultiple),1)
    pygame.draw.circle(screen,ForeColor,((int)(SCREEN_X_MAX/2),(int)(SCREEN_Y_MAX/2)),int(415*fontmultiple),1)
    
    pygame.display.update()
    screen.fill(0)  #屏幕清零

四、結束語：

據說python無所不能，可惜我也是新手小白，我也是站在巨人和大神的肩膀上的，感謝大神執念執戰（王成程）。最重要的是python為什么這么火？第1是代碼簡潔；第2是代碼及庫很多，都是開源的、免費的，都是大神們之間互相免費提供的，在此多謝他們。

喜歡python的人，不管多大年紀、不管男女，看我的python，你學起來簡單有趣，我都是親測過的。

天給大家用canvasu做一個時鐘，希望大家自己也能夠多練練，學習需要案例的積累。文章的代碼自己可以拿去練習下。

這里還是要說一下我的前端學習群：594959296，從我一個人到現在的1369人都是我每篇文章每個特效聚集的小伙伴，可以說都是我們大前端的學霸啊，不定期分享干貨。想學到東西的都可以來，歡迎初學和進階中的小伙伴

主要的知識點:

狀態保存 context.save()
狀態恢復 context.restore()
旋轉 context.rotate(弧度)
平移 context.translate(x,y) x,y 是需要移動到的目標位置坐標
縮放 context.scale(1.5,1.5) 1.5,1.5 是縮放比例, 將原來的畫布放大1.5倍
畫圓弧 context.arc(x,y,r,初始弧度, 最終弧度)
清空矩形內容context.clearRect(x,y,width,height)
時間(時,分,秒)的角度換算

效果圖就是這樣：

代碼如下：

學習javascript也是有門檻的，就是你的html和css至少還比較熟練，您不能連html這東東是干啥的都不知道就開始學javascript了，學乘除前，學好加減法總是有益無害的。

再說二點建議：

不要急著看一些復雜的javascript網頁特效的代碼，這樣除了打擊你的自信心，什么也學不到
看網上什么幾天精通javascript的，直接跳過吧，沒戲

如果想看到更加系統的文章和學習方法經驗可以關注我的微信公眾號：‘web前端課程’關注后回復‘給我資料’可以領取一套完整的學習視頻

在線咨詢

上一篇：10 種 JavaScript 最常見的錯誤
下一篇：為什么我推薦使用JSX開發Vue3

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。