综合五月天,亚洲国产第一区二区香蕉

當前位置：首頁 > 范文|應用文 > IT技術專欄 > 網(wǎng)絡編程

JS+Canvas繪制時鐘效果

來源：易賢網(wǎng) 閱讀：879 次日期：2016-06-23 15:50:28

溫馨提示：易賢網(wǎng)小編為您整理了“JS+Canvas繪制時鐘效果”,方便廣大網(wǎng)友查閱！

這篇文章主要為大家詳細介紹了基于javascript下使用canvas繪制時鐘的具體實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了使用canvas繪制時鐘的具體代碼，供大家參考，具體內(nèi)容如下

代碼如下:

1. clock.html

<!doctype html>

<head>

<title>canvas時鐘</title>

</head>

<body>

var canvas=document.getElementById("canvas");

var context=canvas.getContext('2d');

//draw();

function draw(){

//得到當前系統(tǒng)的時分秒

var now=new Date();

var sec=now.getSeconds();

var min=now.getMinutes();

var hour=now.getHours();

hour>=12&&(hour=hour-12);

var radius = Math.min(canvas.width/2,canvas.height/2);

//初始化畫布

context.save();

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

context.translate(canvas.width/2,canvas.height/2);

context.rotate(-Math.PI/2);

context.save();

//表框

//小時刻度

context.strokeStyle="black";

context.fillStyle="black";

context.lineWidth=3;

context.lineCap="round";

context.beginPath();

for(var i=0;i<12;i++){

context.rotate(Math.PI/6);

context.moveTo(radius-30,0);

context.lineTo(radius-10,0);

}

context.stroke();

context.restore();

context.save();

//分鐘刻度

context.lineWidth=2;

context.beginPath();

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

if(!i%5==0){

context.moveTo(radius-15,0);

context.lineTo(radius-10,0);

}

context.rotate(Math.PI/30);

}

context.stroke();

context.restore();

context.save();

//畫上時針

context.rotate((Math.PI/6)*hour+(Math.PI/360)*min+(Math.PI/21600)*sec);

context.lineWidth=6;

context.beginPath();

context.moveTo(-10,0);

context.lineTo(radius*0.5,0);

context.stroke();

context.restore();

context.save();

context.rotate((Math.PI/30)*min+(Math.PI/1800)*sec);

context.strokeStyle="#29A8DE";

context.lineWidth=4;

context.lineCap="butt";

context.beginPath();

context.moveTo(-20,0);

context.lineTo(radius*0.7,0);

context.stroke();

context.restore();

context.save();

context.rotate(sec*Math.PI/30);

context.strokeStyle="red";

context.lineWidth=2;

context.lineCap="butt";

context.beginPath();

context.moveTo(-30,0);

context.lineTo(radius*0.9,0);

context.stroke();

context.restore();

context.save();

context.lineWidth=4;

context.strokeStyle="gray";

context.beginPath();

context.arc(0,0,radius,0,Math.PI*2,true);

context.stroke();

context.restore();

}

window.onload=function(){

setInterval(draw,1000)

}

</script>

</body>

</html>

2. JavaScript代碼

var canvas=document.getElementById("canvas");

var context=canvas.getContext('2d');

//draw();

function draw(){

//得到當前系統(tǒng)的時分秒

var now=new Date();

var sec=now.getSeconds();

var min=now.getMinutes();

var hour=now.getHours();

hour>=12&&(hour=hour-12);

var radius = Math.min(canvas.width/2,canvas.height/2);

//初始化畫布

context.save();

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

context.translate(canvas.width/2,canvas.height/2);

context.rotate(-Math.PI/2);

context.save();

//表框

//小時刻度

context.strokeStyle="black";

context.fillStyle="black";

context.lineWidth=3;

context.lineCap="round";

context.beginPath();

for(var i=0;i<12;i++){

context.rotate(Math.PI/6);

context.moveTo(radius-30,0);

context.lineTo(radius-10,0);

}

context.stroke();

context.restore();

context.save();

//分鐘刻度

context.lineWidth=2;

context.beginPath();

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

if(!i%5==0){

context.moveTo(radius-15,0);

context.lineTo(radius-10,0);

}

context.rotate(Math.PI/30);

}

context.stroke();

context.restore();

context.save();

//畫上時針

context.rotate((Math.PI/6)*hour+(Math.PI/360)*min+(Math.PI/21600)*sec);

context.lineWidth=6;

context.beginPath();

context.moveTo(-10,0);

context.lineTo(radius*0.5,0);

context.stroke();

context.restore();

context.save();

context.rotate((Math.PI/30)*min+(Math.PI/1800)*sec);

context.strokeStyle="#29A8DE";

context.lineWidth=4;

context.lineCap="butt";

context.beginPath();

context.moveTo(-20,0);

context.lineTo(radius*0.7,0);

context.stroke();

context.restore();

context.save();

context.rotate(sec*Math.PI/30);

context.strokeStyle="red";

context.lineWidth=2;

context.lineCap="butt";

context.beginPath();

context.moveTo(-30,0);

context.lineTo(radius*0.9,0);

context.stroke();

context.restore();

context.save();

context.lineWidth=4;

context.strokeStyle="gray";

context.beginPath();

context.arc(0,0,radius,0,Math.PI*2,true);

context.stroke();

context.restore();

}

window.onload=function(){

setInterval(draw,1000)

}

</script>

以上就是本文的全部內(nèi)容，希望對大家學習javascript程序設計有所幫助。

更多信息請查看網(wǎng)絡編程

上一篇：JQuery的常用選擇器/過濾器/方法全面介紹

下一篇：Javascript之BOM(window對象)詳解

易賢網(wǎng)手機網(wǎng)站地址：JS+Canvas繪制時鐘效果

由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復僅供參考，敬請考生以權威部門公布的正式信息和咨詢?yōu)闇剩?/div>

相關閱讀網(wǎng)絡編程

Shell中如何刪除文本比較長的行的實現(xiàn)方法10月30日

vue.js語法及常用指令10月30日

python 讀寫中文json的實例詳解10月30日

Objective-C Json 實例詳解10月30日

bootstrap table sum總數(shù)量統(tǒng)計實現(xiàn)方法10月30日

python生成二維碼的實例詳解10月30日

Python批量更改文件名的實現(xiàn)方法10月30日

解決出現(xiàn)Incorrect integer value的問題10月30日

jQuery實現(xiàn)切換隱藏與顯示同時切換圖標功能10月30日

docker python api 安裝配置的詳解10月30日

javascript按鈕禁用和啟用的效果實例代碼10月30日

vue.js todolist實現(xiàn)代碼10月30日

vue.js 父向子組件傳參的實例代碼10月30日

apache 開啟重定向 rewrite的實現(xiàn)方法10月30日

Vue.js劃分組件的方法10月30日

python logging日志模塊的詳解10月30日

vue中的scope使用詳解10月30日

docker cgroup 資源監(jiān)控的詳解10月30日

使用Android Studio 開發(fā)自己的SDK教程10月23日

linux系統(tǒng)下MongoDB單節(jié)點安裝教程10月23日

易賢網(wǎng)移動網(wǎng)站

2025國考·省考課程試聽報名

報班類型
姓名
手機號
驗證碼

最新信息

2025年曲靖師范學院招聘博士及高層次人才公告

2025年曲靖師范學院招聘碩士及以上工作人員公告

【報名入口】廣東電網(wǎng)公司、廣西電網(wǎng)公司等9家單位2025年2月社會招聘

南網(wǎng)能源公司2025年第一批社會招聘公告

南方電網(wǎng)新型電力系統(tǒng)（北京）研究院有限公司2025年第一批社會招聘公告

南方電網(wǎng)瀾湄國際能源有限責任公司2025年第一批社會招聘公告

南網(wǎng)科研院2025年第一批社會招聘公告

廣東電網(wǎng)有限責任公司直屬部分單位2025年第一批社會招聘公告

廣西電網(wǎng)公司廣西送變電建設有限責任公司2025年第一批社會招聘公告

2025年南方電網(wǎng)能源發(fā)展研究院第一批社會招聘公告

公考類

云南公務員貴州公務員四川公務員廣西公務員各省公務員國家公務員選調(diào)遴選

招聘類

事業(yè)單位教師招聘特崗教師三支一扶志愿者銀行招聘國企招聘

各類考試

學歷升學會計考試職業(yè)資格外語考試醫(yī)學考試工程考試教師資格

工業(yè)和信息化部備案號：滇ICP備2023014141號-1 云南省教育廳備案號：云教ICP備0901021 滇公網(wǎng)安備53010202001879號人力資源服務許可證：（云）人服證字（2023）第0102001523號