JS+Canvas繪制時鐘效果

當(dāng)前位置：首頁 > 范文|應(yīng)用文 > IT技術(shù)專欄 > 網(wǎng)絡(luò)編程

JS+Canvas繪制時鐘效果

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

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

這篇文章主要為大家詳細(xì)介紹了基于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(){

//得到當(dāng)前系統(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(){

//得到當(dāng)前系統(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)容，希望對大家學(xué)習(xí)javascript程序設(shè)計有所幫助。

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

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

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

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

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

相關(guān)閱讀網(wǎng)絡(luò)編程

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)切換隱藏與顯示同時切換圖標(biāo)功能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)站

2026上岸·考公考編培訓(xùn)報班

報班類型
姓名
手機(jī)號
驗證碼

茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合