Canvas時鐘特效 JS效果

今天上傳乙個前一陣子做的canvas例項，時鐘特效，是根據課程編寫的，主要的是js和canvas

html**：

@charset "utf-8";

body
canvas

window.onload = function()

ogc.closepath();
ogc.stroke();
ogc.fillstyle = 'white';
ogc.beginpath();
ogc.moveto(x,y);
ogc.arc(x,y,r*19/20,0,2*math.pi,false);
ogc.closepath();
ogc.fill();
// 大刻度
ogc.linewidth = 3;
ogc.beginpath();
for( var i=0; i<12; i++ )
ogc.closepath();
ogc.stroke();
ogc.fillstyle = 'white';
ogc.beginpath();
ogc.moveto(x,y);
ogc.arc(x,y,r*18/20,0,2*math.pi,false);
ogc.closepath();
ogc.fill();
// 時針
ogc.linewidth = 5;
ogc.beginpath();
ogc.moveto(x,y);
ogc.arc(x,y,r*10/20,ohoursvalue,ohoursvalue,false);
ogc.closepath();
ogc.stroke();
// 分針
ogc.linewidth = 3;
ogc.beginpath();
ogc.moveto(x,y);
ogc.arc(x,y,r*14/20,ominvalue,ominvalue,false);
ogc.closepath();
ogc.stroke();
// 秒針
ogc.linewidth = 1;
ogc.beginpath();
ogc.moveto(x,y);
ogc.arc(x,y,r*19/20,osecvalue,osecvalue,false);
ogc.closepath();
ogc.stroke();
} setinterval(todraw,1000);
todraw();
}

canvas實現簡易時鐘效果

最終效果 1 設定canvas環境，這一部分比較基礎，不做詳細展開。var canvas document.getelementbyid mycanvas canvas.width document.documentelement.clientwidth 0.75 canvas.height doc...

使用canvas實現數字時鐘效果

canvas id canvas canvas script function cxt.fillstyle f00 cxt.fillrect 10,10,50,50 cxt.strokestyle 0f0 儲存時間資料 vardata 儲存運動的小球 varballs 設定粒子半徑 varr can...

使用canvas實現簡單的時鐘效果

這次要借助canvas實現時鐘效果，展示當前時間，形狀為圓形。完整實現效果截圖如上 關鍵點 時鐘效果的實現主要分為3部分1 繪製表盤 大小刻度 1 12 等靜態部分的繪製2 展示當前時間3 時針 分針和秒針動起來繪製靜態部分 首先得到canvas和canvas的繪圖環境 var canvas doc...