HTML5 Canvas에서 동적 원 시계를 만드는 방법

Question

<canvas>을 사용하여 HTML과 JS의 원형 시계를 만들고 싶습니다.

function updateClock() 
    { 
     // Variables for the time 
     var currentTime = new Date(); 

     var currentHours = currentTime.getHours(); 
     var currentMinutes = currentTime.getMinutes(); 
     var currentSeconds = currentTime.getSeconds(); 
     // Convert time variable in RADs 
     var RADcurrentTime = { 
      hours : currentHours * Math.PI * 2/24, 
      minutes : currentMinutes * Math.PI * 2/60, 
      seconds : currentSeconds * Math.PI * 2/60 
     }; 
     // Compose the circle clock 
     var clock_canvas = document.getElementById("clock"); 
     var context = clock_canvas.getContext("2d"); 

     var hours_radius = 70; 
     context.beginPath(); 
     context.arc(screen.availWidth/2, screen.availHeight/2, hours_radius, 0, RADcurrentTime.hours); 
     context.closePath(); 
     context.lineWidth = 3; 
     context.stroke(); 

     var minutes_radius = 50; 
     context.beginPath(); 
     context.arc(screen.availWidth/2, screen.availHeight/2, minutes_radius, 0, RADcurrentTime.minutes); 
     context.closePath(); 
     context.lineWidth = 3; 
     context.stroke(); 

     var seconds_radius = 30; 
     context.beginPath(); 
     context.arc(screen.availWidth/2, screen.availHeight/2, seconds_radius, 0, RADcurrentTime.seconds); 
     context.closePath(); 
     context.lineWidth = 3; 
     context.stroke(); 
     ` 

하지만이 작동하지 않습니다 이 코드를 썼다. 나는 본체 태그 onload="updateClock(); setInterval('updateClock()', 1000)"을 넣었지만 여전히 작동하지 않습니다. 내가 얻을 수있는 유일한 것은 흰색 화면입니다 ... 누구든지 원인을 제안 할 수 있습니까?

Answer 1

캔버스를 기준으로 콘텐츠를 그리지 않고 화면에 표시하면 오프셋이 매우 다를 수 있습니다.

캔버스가 200 픽셀 너비 이상이고 화면 크기가 1920x1080 인 경우 절반은 중심점 960, 540에서 시계를 그립니다. 즉, (여기) 200x200의 캔버스의 한계를 벗어난 방법. 대신이의

:

context.arc(canvas.width/2, canvas.height/2,hours_radius,0,RADcurrentTime.hours); 
      ^^^^^^^^^^^^ ^^^^^^^^^^^^^ 

또한 this answer에서 몇 가지 유용한 정보를 얻을 수 있습니다 :이 같은

context.arc(screen.availWidth/2,screen.availHeight/2, hours_radius, 0, RADcurrentTime.hours); 

사용 무언가 (캔버스를 가정하면 정사각형 크기이다).