界面顯示：

html代碼：

Document : 時鐘

Created on : 2016-5-19, 9:49:29

Author : Administrator

--%>

JSP Page

canvas{

border: 1px solid black;

}

(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 length1=len * 0.5;

var width1=5;

var color1="#000000";

drawhand(angle1,length1,width1,color1);

//繪制分針

var angle2 = Math.PI * 2 *(15 - (m+ s/60))/60;

var length2=len * 0.7;

var width2=3;

var color2="#555555";

drawhand(angle2,length2,width2,color2);

//繪制秒針

var angle3 = Math.PI * 2 *(15 - s)/60;

var length3=len * 0.8;

var width3=1;

var color3="#aa0000";

drawhand(angle3,length3,width3,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();

}

})();

重點：fillText ?drawhand 使用 及其中角度的計算

總結

以上是生活随笔為你收集整理的快速时钟开始游戏4399html5,HTML5 简单页面实现时钟效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。