JS+Canvas繪制時鐘效果
更新時間：2020年08月20日 14:34:31 作者：tutugo
這篇文章主要為大家詳細介紹了基于javascript下使用canvas繪制時鐘的具體實現(xiàn)代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了使用canvas繪制時鐘的具體代碼，供大家參考，具體內容如下
1. clock.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Description" content="">
<title>canvas時鐘</title>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script>
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();
context.restore();
}
window.onload=function(){
setInterval(draw,1000)
}
</script>
</body>
</html>
2. JavaScript代碼
<script>
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();
context.restore();
}
window.onload=function(){
setInterval(draw,1000)
}
</script>
以上就是本文的全部內容，希望對大家學習javascript程序設計有所幫助。
相關文章
這篇文章主要介紹了js給selected添加options的方法,涉及javascript動態(tài)添加頁面下拉列表selected的技巧,需要的朋友可以參考下2015-05-05
本文主要分享了幾種tab切換的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
用js實現(xiàn)的對css的一些操作方法，集合，方便需要用js控制css的朋友2008-10-10
js控件Kindeditor實現(xiàn)圖片自動上傳功能
這篇文章主要為大家詳細介紹了js控件Kindeditor實現(xiàn)圖片自動上傳功能的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-06-06
js數(shù)值計算時使用parseInt進行數(shù)據類型轉換(jquery)
這篇文章主要介紹了js數(shù)值計算時使用parseInt進行數(shù)據類型轉換(jquery),需要的朋友可以參考下2014-10-10
這篇文章主要介紹了JavaScript Date 知識，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-01-01
Webpack 是一個前端資源加載/打包工具。它將根據模塊的依賴關系進行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對應的靜態(tài)資源，這篇文章主要介紹了JavaScript中Webpack的使用,需要的朋友可以參考下2021-10-10
textarea焦點的用法實現(xiàn)獲取焦點清空失去焦點提示效果
這篇文章主要介紹了textarea焦點的用法實現(xiàn)獲取焦點清空失去焦點提示效果,需要的朋友可以參考下2014-05-05
這篇文章主要為大家詳細介紹了簡單實現(xiàn)js選項卡切換效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
javascript中的new是一個語法糖,new的過程實際上是創(chuàng)建一個新對象,把新象的原型設置為構造器函數(shù)的原型,這篇文章主要給大家介紹了關于JavaScript中new操作符原理的相關資料,需要的朋友可以參考下2021-07-07