利用H5api實現(xiàn)時鐘的繪制(javascript)
HTML5的canvas標(biāo)簽用于繪制圖像(通過腳本,通常是 JavaScript)。不過,canvas元素本身并沒有繪制能力(它僅僅是圖形的容器)必須使用腳本來完成實際的繪圖任務(wù)。
下面,具體總結(jié)了一下使用畫布canvas的步驟:
畫布:
canvas
在頁面上規(guī)劃出一塊空間,canvas標(biāo)簽,通過javascript控制畫布完成繪制
1.獲取畫布
var canvas=document.getElementById("");
2.獲取上下文對象 (獲取畫筆)
var cx=canvas.getContext(“2d”);
3.設(shè)置畫筆樣式
cx.fillStyle=‘red'; cx.strokeStyle=‘blue';
4.開始繪制
下面是對于canvas使用,繪制一個簡單鐘表的小例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> window.onload=function(){ //1.獲取畫布 var canvas=document.getElementById("canvas"); //2.獲取畫筆 var cx=canvas.getContext("2d"); function clock(){ //3.設(shè)置畫筆樣式 cx.fillStyle="orange"; //4.繪制圖形 //繪制表盤 cx.beginPath(); cx.arc(300,300,200,0,Math.PI*2) cx.closePath(); cx.fill(); //繪制時刻度 cx.lineWidth=2; cx.strokeStyle="black"; for(var i=0;i<12;i++){ cx.save(); cx.translate(300,300); cx.rotate(i*(Math.PI/6)); // cx.beginPath(); cx.moveTo(0,-180); cx.lineTo(0,-200); // cx.closePath(); cx.stroke(); cx.fillStyle="black"; cx.font="16px blod"; cx.rotate(Math.PI/6) cx.fillText(i+1,-5,-220); cx.restore(); } //繪制分刻度 for(var i=0;i<60;i++){ cx.save(); cx.translate(300,300); cx.rotate(i*(Math.PI/30)); cx.beginPath(); cx.moveTo(0,-190); cx.lineTo(0,-200); cx.closePath(); cx.stroke(); cx.restore(); } //獲取當(dāng)前時間 var today=new Date(); var hour=today.getHours(); var min=today.getMinutes(); var sec=today.getSeconds(); hour=hour+min/60; //繪制時針 cx.lineWidth=5; cx.save(); cx.beginPath(); cx.translate(300,300); cx.rotate(hour*(Math.PI/6)); cx.moveTo(0,10); cx.lineTo(0,-100); cx.closePath(); cx.stroke(); cx.restore(); //繪制分針 cx.lineWidth=3; cx.save(); cx.beginPath(); cx.translate(300,300); cx.rotate(min*(Math.PI/30)); cx.moveTo(0,10); cx.lineTo(0,-120); cx.closePath(); cx.stroke(); cx.restore(); //繪制秒針 cx.lineWidth=1; cx.strokeStyle="red"; cx.save(); cx.beginPath(); cx.translate(300,300); cx.rotate(sec*(Math.PI/30)); cx.moveTo(0,10); cx.lineTo(0,-160); cx.closePath(); cx.stroke(); cx.restore(); //繪制交叉處 cx.fillStyle="#ccc"; cx.strokeStyle="red"; cx.save(); cx.translate(300,300); cx.beginPath(); cx.arc(0,0,5,0,Math.PI*2); cx.closePath(); cx.fill(); cx.stroke(); cx.restore(); setTimeout(clock,1000); } clock() } </script> </head> <body> <canvas id="canvas" width="600px" height="600px" style="background-color: #ccc;"></canvas> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js類型轉(zhuǎn)換與引用類型詳解(Boolean_Number_String)
本篇文章主要是對js中的類型轉(zhuǎn)換與引用類型(Boolean_Number_String)進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-03-03openLayer4實現(xiàn)動態(tài)改變標(biāo)注圖標(biāo)
這篇文章主要為大家詳細(xì)介紹了openLayer4實現(xiàn)動態(tài)改變標(biāo)注圖標(biāo),文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-08-08javascript截取字符串(通過substring實現(xiàn)并支持中英文混合)
用js方法substring()、方法substr()實現(xiàn)如標(biāo)題所示的截取字符串并支持中英文混合,具體代碼如下,感興趣的各位可以參考下哈2013-06-06用云開發(fā)Cloudbase實現(xiàn)小程序多圖片內(nèi)容安全監(jiān)測的代碼詳解
這篇文章主要介紹了用云開發(fā)Cloudbase實現(xiàn)小程序多圖片內(nèi)容安全監(jiān)測,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06紅黑樹的插入詳解及Javascript實現(xiàn)方法示例
這篇文章主要給大家介紹了關(guān)于紅黑樹的插入的相關(guān)資料,以及Javascript實現(xiàn)的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起看看吧。2018-03-03