HTML5canvas時鐘例項

2021-07-29 02:02:49 字數 2429 閱讀 5094

直接放**不太好，還是簡單說說運用到的canvas知識

1、canvas 元素用於在網頁上繪製圖形。

id="c"


width="1000"


height="400">


canvas>
2、canvas2d環境下繪製

var ogc = oc.getcontext('2d');
3、我要開始繪製路徑啦

ogc.begin


path();
4、從畫布的（x，y）點開始繪製路徑

ogc.moveto(x,y);
5、以（x，y）為圓心，r為半徑，從0度畫到360度。也就是乙個圓咯

ogc.arc(x,y,r,0,360*math.pi/180,false);
6、結束繪製路徑

ogc.closepath();
7、用線把剛才的路徑連起來

ogc.stroke();
8、想把這條線變寬一點

ogc.linewidth =3;
9、想給這個圓塗上白色（填充）

ogc.fillstyle= "#fff"
下面是例項：



lang="en">


charset="utf-8">


titletitle>


body


#cstyle>


window.onload = function


()                 ogc.closepath();


ogc.stroke();


//              畫乙個填充白色的圓，半徑是上面的19/20，從而遮擋裡面的線條，達到顯示小刻度的目的


ogc.fillstyle = "#fff";


ogc.beginpath();


ogc.arc(x,y,r*19/20,0,360*math.pi/180);


ogc.closepath();


ogc.fill();


//              畫大刻度同理


ogc.linewidth = 3;


ogc.beginpath();


for(var i=0;i<60;i++)


ogc.closepath();


ogc.stroke();


ogc.fillstyle = "#fff";


ogc.beginpath();


ogc.arc(x,y,r*18/20,0,360*math.pi/180,false);


ogc.closepath();


ogc.fill();


//                畫中心小圓點


ogc.fillstyle = "#000";


ogc.beginpath();


ogc.arc(x,y,r*1/20,0,360*math.pi/180,false);


ogc.closepath();


ogc.fill();


//                畫時針


ogc.linewidth = 4;


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,ominsvalue,ominsvalue,false);


ogc.closepath();


ogc.stroke();


//                畫秒針


ogc.linewidth = 1;


ogc.beginpath();


ogc.moveto(x,y);


ogc.arc(x,y,r*17/20,osensvalue,osensvalue,false);


ogc.closepath();


ogc.stroke();


}setinterval(todraw,1000);


todraw();


}script>


head>


id="c"


width="1000"


height="400">


canvas>


body>


html>

用HTML5 Canvas 實現的 時鐘

基本動畫的步驟 basic animation steps 用canvas畫一幀動畫，通常需要以下四個步驟 1.清空 canvas 除非接下來要畫的內容會完全充滿 canvas 例如背景圖 否則你需要清空所有。最簡單的做法就是用 clearrect 方法。2.儲存 canvas 狀態 如果你要改變一...

HTML5 canvas畫布 學習例項

如圖 如下 js 如下 tankgame2.js 我的坦克hero function hero x,y,direct 右移 this.moveright function 下移 this.movedown function 左移 this.moveleft function 畫坦克 function...

HTML5 canvas雙快取例項

下面是用html5的標籤寫的乙個視差滾動動畫的示例。採用了製作動畫或者遊戲程式設計中常用的雙緩衝技術 獲取到頁面中的canvas物件之後，建立了乙個與頁面canvas同樣大小的canvas物件。繪圖時先將影象繪製到緩衝canvas中，等到每一楨的影象繪製完全後在把整個緩衝canvas繪製到頁面can...