HTML5는 많은 기능을 구현할 만큼 강력하며, 시계를 그리는 것은 단지 도구에 불과합니다. 그림 포인터는 ctx의 drawImage를 사용하여 구현할 수 있습니다. 호환성 문제에 관해서는 이미 온라인에 많은 솔루션이 있습니다. 이 내용은 응용을 위한 것이 아니라 재미를 위한 것입니다. 먼저 렌더링을 보여드리겠습니다 구현 코드 코드 복사코드는 다음과 같습니다. <br>// <![CDATA[ <br /> var time = new Date() <br /> var h = time.getHours( ); <br /> var m = time.getMinutes(); <br /> var s = time.getSeconds() <br /> var weekday={:'Sunday',:'Tuesday',: ' 수요일',:'목요일',:'금요일',:'토요일'}; <br /> h=h>?(h-)*parseInt(m/):h*parseInt(m/); 초기 위치 <br> //====================================== <br> var x = ,y=,sAngle=; //x y 원점 초침 각도 변수<br> function draw() <br> { <br> var c=document.getElementById("myCanvas") <br> var ctx=c. getContext( "d"); <br> ctx.clearRect(,,c.width,c.height); <br> s ;//초침<br> //Background<br> ctx.fillStyle = '#eee ' // 설정을 변경합니다. <br> ctx.globalAlpha = .; <br> ctx.fillRect(,,c.width,c.height) // 새로운 설정으로 직사각형을 그립니다. <br> //== ==fill( 표시) 원점 === <br> ctx.beginPath(); <br> ctx.arc(x,y,,,true) <br> ctx.fill(); (); <br> var grd=ctx.createLinearGradient(x,y,,); <br> grd.addColorStop(,"#FF") <br> grd.addColorStop(.,"#FF"); 🎜> grd.addColorStop(,"#FF"); <br> ctx.fillStyle=grd; <br> ctx.font = "pt Arial"; <br> ctx.fillText("html",,); > ctx.save (); <br> // 시간 척도 <br> for(var i=;i<;i ) <br /> { <br /> var angle=(Math.PI*)/ <br /> ctx .beginPath() ; <br /> var b==||i==||i==||i== <br /> if(i%==){ <br /> if(b){ <br /> ctx.fillStyle ="red"; <br /> 반경=; <br /> } <br /> else{ <br /> ctx.fillStyle="blue"; <br /> 반경=.; .font=" px Arial"; <br /> ctx.fillText(i/==?:i/,x-,y-); //x 큰 오른쪽 작은 왼쪽 y 크기 숫자 배율<br /> } <br /> else <br /> { <br /> ctx.fillStyle="#"; <br /> radius=; <br /> } <br /> if(s==i)radius=radius <br /> ctx.arc(x, y-,radius ,,true); <br /> ctx.fill(); <br /> 변환(ctx,x,y,angle,true) <br /> ctx.restore(); //== ======================= <br /> sAngle=(Math.PI*)/*s //초<br /> ctx; .save( ); //시침<br /> ctx.fillStyle="red"; <br /> // ctx.StrokeStyle="red"; <br /> ctx.lineWidth=; y,(Math .PI*)/*h,true); <br /> sj(ctx,x,y,x-,y-,x ,y-) <br /> ctx.restore(); ctx.save( );//분 바늘 회전 <br /> ctx.fillStyle="blue"; <br /> ctx.lineWidth= <br /> 변환(ctx,x,y,(Math.PI*)/*m ,true); <br /> sj(ctx,x,y,x-,y-,x ,y-); <br /> ctx.restore() <br /> //초침이 회전합니다<br /> ctx. 저장(); <br /> ctx.fillStyle="#"; <br /> 변환(ctx,x,y,sAngle,true) <br /> sj(ctx,x,y,x-,y-,x , y-); <br /> ctx.restore(); <br /> //데이터 정렬<br /> if(s%==){ <br /> sAngle=,s=,m; ){ //12시마다 시침이 한 번 회전합니다. <br /> if(m!=)h <br /> if(m%==)m= <br /> } <br /> if(h%==)h =; <br /> }; " 연도" (time.getMonth() ) "월" time.getDate() "일" weekday[time.getDay()] " h:" time.getHours() " m:" " s:" s; <br /> document.getElementById("d").innerHTML=dateString; <br /> } <br /> //포인터 삼각형! x,y){ <br /> //====예==== <br /> // ctx.beginPath() <br /> // ctx.moveTo(x,y) <br /> // ctx .lineTo(x,y-) ; <br /> // ctx.strove(); <br /> // ctx.beginPath() <br /> // <br /> // ctx.moveTo(x-,y- ); <br /> // ctx .lineTo(x ,y-); <br /> // ctx.lineTo(x,y--) <br /> // ctx.fill(); (); <br /> ctx.moveTo(x,y); <br /> ctx.Stroke() <br /> ctx. moveTo(x,y); <br /> ctx.lineTo(x,y);ctx.lineTo(x,y); <br /> ctx.fill(); <br /> } <br /> //좌표에 따라 회전<br /> functionTransform(ctx,x,y,angle,b){ <br /> if(b){// 시계 방향 <br /> ctx.transform(Math.cos(angle), Math.sin(angle), <br /> -Math.sin(angle), Math.cos(angle), <br /> x*(-Math.cos(각)) x*Math.sin(각), <br /> y*(-Math.cos(각)) - y*Math.sin(각)) <br /> } <br /> } <br /> //======초마다 실행============(실행 이벤트는 선택 사항) <br /> window.setInterval(function(){draw()}, ) ; // window.onload=function(){ //효과는 위와 같습니다.<br /> // setInterval("draw()",) <br /> // }; / ]]> <br>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
