這篇文章將為大家詳細講解有關如何利用html 5制作一個簡單的時鐘效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
我們先來看看最終效果：
看上去很簡單的一個時鐘效果，但是具體實現代碼仍然包含了一些重點知識。
下面是具體的實現代碼：
（提示：要特別注意fillText drawhand 的使用及其中角度的計算）
<%--
Document : 時鐘
Created on : 2016-5-19, 9:49:29
Author : Administrator
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<style>
canvas{
border: 1px solid black;
}
</style>
<script>
(function(){
//cavas元素對象
var canvas=null;
//canvas的3d上下文
var ctx=null;
//cavan的尺寸
var cw=0;
var ch=0;
/**
* 頁面導入時的事件處理
*/
window.addEventListener("load",function(){
canvas=document.getElementById("sample");
ctx=canvas.getContext("2d");
cw=parseInt(canvas.width);
ch=parseInt(canvas.height);
ctx.translate(cw/2, ch/2);
//繪制時鐘
draw_watch();
},false);
/**
* 繪制時鐘
*/
function draw_watch(){
//清空Canvas
ctx.clearRect(-cw/2,-ch/2,cw,ch);
//計算針的最大長度
var len=Math.min(cw, ch)/2;
//繪制刻度盤
var tlen=len*0.85;
ctx.font="14px 'Arial'";
ctx.fillStyle="black";
ctx.textAlign="center";
ctx.textBaseLine="middle";
for(var i=0; i<12; i++){
var tag1=Math.PI*2*(3-i)/12;
var tx=tlen * Math.cos(tag1);
var ty=-tlen * Math.sin(tag1);
ctx.fillText(i,tx,ty);
}
//獲取當前的時分秒
var d=new Date();
var h=d.getHours();
var m=d.getMinutes();
var s=d.getSeconds();
if(h >12 ){
h=h-12;
}
//繪制時針
var angle1 = Math.PI * 2 *(3 - (h+ m/60))/12;
var length2=len * 0.5;
var width2=5;
var color1="#000000";
drawhand(angle1,length2,width2,color1);
//繪制分針
var angle2 = Math.PI * 2 *(15 - (m+ s/60))/60;
var length3=len * 0.7;
var width3=3;
var color2="#555555";
drawhand(angle2,length3,width3,color2);
//繪制秒針
var angle3 = Math.PI * 2 *(15 - s)/60;
var length4=len * 0.8;
var width4=1;
var color3="#aa0000";
drawhand(angle3,length4,width4,color3);
//設置timer
setTimeout(draw_watch,1000);
}
/**
* 針繪制函數
*/
function drawhand(angle,len,width,color){
//計算針端的坐標
var x=len*Math.cos(angle);
var y=-len * Math.sin(angle);
//繪制針
ctx.strokeStyle=color;
ctx.lineWidth=width;
ctx.lineCap="round";
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(x,y);
ctx.stroke();
}
})();
</script>
<body>
<canvas id="sample" width="150" height="150"></canvas>
</body>
</html>關于“如何利用html 5制作一個簡單的時鐘效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
