HTML5 시계 구현 code_html5 튜토리얼 기술

复主代码 代码如下: 캔버스{position:absolute;top:0px ;왼쪽:0px;} 时钟 //获取绘图对象 var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d') ; var p_canvas = document.getElementById('p_canvas'); var p_context = p_canvas.getContext('2d'); var height=200,width=200; //画大圆 context.beginPath(); context.StrokeStyle="#009999"; context.arc(width/2,height/2,width/2-1,0,Math .PI*2,true); context.Stroke(); context.closePath(); //画中间点 context.beginPath(); context.fillStyle= "#000"; context.arc(너비/2,높이/2,3,0,Math.PI*2,true); context.fill(); context.closePath() ; //画小刻島 var angle = 0,radius = width/2 - 4; for(var i=0;i context.beginPath(); context.StrokeStyle="#000"; //确认刻島的起始点 var x = 너비/2 반경*Math.cos(angle),y = 높이/2 반경*Math.sin(angle); var temp_angle = Math.PI 각도; context.lineTo(x 3*Math.cos(temp_angle),y 3*Math.sin(temp_angle)); context.Stroke(); context.closePath(); 각도 =6/180*Math.PI; } //대각도 angle = 0,radius = width/2 - 4; context.textBaseline = 'middle'; context.textAlign = 'center'; context.lineWidth = 2; for(var i=0;i var num = i 3>12? 나는 3-12:i 3 ; context.beginPath(); context.StrokeStyle="#FFD700"; var x = 너비/2 반경*Math.cos(각도),y = 높이/2 반경*Math.sin( 각도); context.moveTo(x,y); var temp_angle = Math.PI 각도; context.lineTo(x 8*Math.cos(temp_angle),y 8*Math.sin(temp_angle)); context.Stroke(); context.closePath(); / /大刻島 文字 context.fillText(num,x 16*Math.cos(temp_angle),y 16*Math.sin(temp_angle)); angle =30/180*Math.PI; } 함수 포인터(){ var p_type = [['#000',70,1],['#ccc',60,2],['red',50,3] ]; function drwePointer(type,angle){ type = p_type[type]; angle = angle*Math.PI*2 - 90/180*Math.PI; var 길이= 유형[1]; p_context.beginPath(); p_context.lineWidth = 유형[2]; p_context.StrokeStyle = 유형[0]; p_context.moveTo (너비/2, 높이/2); p_context.lineTo(너비/2 길이*Math.cos(각도), 높이/2 길이*Math.sin(각도)); p_context.Stroke(); p_context.closePath(); } setInterval(function (){ p_context.clearRect(0,0,height,width); var time = new Date(); var h = time.getHours(); var m = time.getMinutes(); var s = time.getSeconds() h = h>12?h-12:h; h = h m/60 h=h/12; m=m/60; s=s/60; drwePointer(0,s); drwePointer(1,m); drwePointer(2,h); },500); } var p = new Pointer() ;

HTML5 시계 구현 code_html5 튜토리얼 기술

관련 기사