0
내 웹 사이트의 호 클럭을 만들려고합니다. 일반적인 생각은 완전한 순간이 있었을 때 완전한 원이 있고 그 다음에 원으로 돌아 오지 않고 애니메이션으로 시작한다는 것입니다.아크 클럭이 매회 잘못된 각도로 재설정됩니다.
내가 겪고있는 문제는 올바른 위치로 재설정되지 않는다는 것입니다.
자바 스크립트 :
가 여기에 관련 코드입니다
setInterval(function() {
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date)/1000;
// do some time calculations
days = parseInt(seconds_left/86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left/3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left/60);
seconds = parseInt(seconds_left % 60);
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// begin custom shape
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
//secondValue = ((-.5 * Math.PI)*(60-seconds)/60);
ctx.beginPath();
ctx.arc(c.width/2,c.height/2,100,(360),((360/60)*seconds),false);
ctx.lineWidth = 10;
// line color
ctx.strokeStyle = 'white';
ctx.stroke();
// bind event handler to clear button
document.getElementById('clear').addEventListener('click', function() {
context.clearRect(0, 0, canvas.width, canvas.height);
}, false);
// format countdown string + set tag value
countdown.innerHTML = days + "d, " + hours + "h, "
+ minutes + "m, " + seconds + "s";
}, 1000);