1
두 가지 질문이 있습니다. 첫 번째 질문은이 카운트 다운을 만드는 방법입니다. 부트 스트랩을 사용하여 반응이 좋았지 만 만족스러운 결과를 얻을 수 없었습니다.아크 캔버스 만들기 반응성
참고 : 내 스타일을 제거하고 원하는 경우 처음부터 시작할 수 있습니다.
I는 I 내 카운트 원호의 반경을 변경할 때 원형은 다음과 같이 될 것, 다른 값으로 70 원의 반경을 변경할 때 때 두 번째 문제가 발생된다
코드는 여기에 있습니다 :
(function($) {
jQuery.fn.countdown = function(options, callback) {
var settings = {
'date': null
};
if (options) {
$.extend(settings, options);
}
this_sel = $(this);
/*Canvas JavaScript*/
var canvas = document.getElementById('myCanvas');
var canvas1 = document.getElementById('myCanvas1');
var canvas2 = document.getElementById('myCanvas2');
var canvas3 = document.getElementById('myCanvas3');
var context = canvas.getContext('2d');
var context1 = canvas1.getContext('2d');
var context2 = canvas2.getContext('2d');
var context3 = canvas3.getContext('2d');
var centerX = canvas.width/2;
var centerY = canvas.height/2;
var radius = 90;
var sec_arc_end = 0,
min_arc_end = 0,
hour_arc_end = 0,
day_arc_end = 0;
function count_exec() {
eventDate = Date.parse(settings['date'])/1000;
currentDate = Math.floor($.now()/1000);
if (eventDate <= currentDate) {
callback.call(this);
clearInterval(interval);
}
seconds = eventDate - currentDate;
days = Math.floor(seconds/(60 * 60 * 24));
seconds -= days * 60 * 60 * 24;
hours = Math.floor(seconds/(60 * 60));
seconds -= hours * 60 * 60;
minutes = Math.floor(seconds/60);
seconds -= minutes * 60;
// seconds arc canvas...................
context.clearRect(50, 50, canvas.width, canvas.height);
sec_arc_end = ((60 - seconds) * parseFloat(0.10472));
context.beginPath();
context.arc(centerX, centerY, radius, 1.5 * Math.PI, 1.5 * Math.PI + sec_arc_end, false);
context.lineWidth = 8;
context.strokeStyle = '#14E170';
context.stroke();
// minutes arc canvas...................
context1.clearRect(50, 50, canvas.width, canvas.height);
min_arc_end = ((60 - minutes) * parseFloat(0.10471));
context1.beginPath();
context1.arc(centerX, centerY, radius, 1.5 * Math.PI, 1.5 * Math.PI + min_arc_end, false);
context1.lineWidth = 8;
context1.strokeStyle = '#14E170';
context1.stroke();
// hours arc canvas...................
context2.clearRect(50, 50, canvas.width, canvas.height);
hour_arc_end = ((24 - hours) * parseFloat((0.10471 * 5)/2));
context2.beginPath();
context2.arc(centerX, centerY, radius, 1.5 * Math.PI, 1.5 * Math.PI + hour_arc_end, false);
context2.lineWidth = 8;
context2.strokeStyle = '#14E170';
context2.stroke();
// days arc canvas...................
if (days > 364) {
$('#myCanvas3').hide();
}
context3.clearRect(50, 50, canvas.width, canvas.height);
day_arc_end = ((-days) * parseFloat((0.10471 * 5)/2)); // the problem is here
context3.beginPath();
context3.arc(centerX, centerY, radius, -0.5 * Math.PI, (((365 - days)/365) * 2 - 0.5) * Math.PI, false);
context3.lineWidth = 8;
context3.strokeStyle = '#14E170';
context3.stroke();
// add 0 value to left of value
if (!isNaN(eventDate)) {
this_sel.find('.days').text(days);
this_sel.find('.hours').text(hours);
this_sel.find('.mins').text(minutes);
this_sel.find('.secs').text(seconds);
}
}
count_exec();
console.log(days);
interval = setInterval(count_exec, 1000);
};
})(jQuery);
$(document).ready(function() {
$("#countdown").countdown({
date: "6 january 2018 6:34:00"
},
function() {
$("#countdown").text("merry christmas");
}
);
/*Make Canvas Responsive*/
$(".countdown-container").height($(".countdown-container").width());
$(window).resize(function() {
$(".countdown-container").height($(".countdown-container").width());
});
})#countdown {
width: 100%;
padding: 5px;
}
.countdown-container {
width: 24%;
height: 97%;
text-align: center;
}
#countdown .countdown-container {
text-align: center;
float: left;
position: relative;
margin: 0.30% 0.5% 0.30% 0.5%;
}
#countdown .countdown-container .contents {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
font-size-adjust: 0.58;
}
.contents div {
font-size: 28px;
}
.contents span {
font-size: 16px;
}
canvas {
width: 100%;
height: 100%;
border:1px solid #06ee7c;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="countdown">
<div class="countdown-container">
<div class="contents">
<div class="secs">
00
</div>
<span>Seconds</span>
</div>
<canvas id="myCanvas" width="250" height="250"></canvas>
</div>
<div class="countdown-container">
<div class="contents">
<div class="mins">
00
</div>
<span>Minutes</span>
</div>
<canvas id="myCanvas1" width="250" height="250"></canvas>
</div>
<div class="countdown-container">
<div class="contents">
<div class="hours">
00
</div>
<span>Hours</span>
</div>
<canvas id="myCanvas2" width="250" height="250"></canvas>
</div>
<div class="countdown-container">
<div class="contents">
<div class="days">
00
</div>
<span>Days</span>
</div>
<canvas id="myCanvas3" width="250" height="250"></canvas>
</div>
</div>참고 :이
- 전체 페이지에서 코드를 실행하십시오
- 반경 문제가
당신이 연결되어하여 답을 확장이 문서는 오해의 소지가 있습니다. ['closePath'] (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/closePath) 지혜로운 경로 선언을 할 수 없습니다. 이것은 단지'lineTo (lastMovedPoint.x, lastMovedPoint.y)'입니다. 이것은 절대적으로 우리가 새로운 경로 선언을 시작한다는 맥락을 말하지 않습니다. 'beginPath' *와 당신이 사용하고 싶지 않은 다른 해킹들만 그렇게합니다. – Kaiido
링크를 제거 했으므로 답이 오해의 소지가 있습니다 ;-) **이 closePath 호출 **로 OP 코드를 수정하지 않았습니다. 당신은'clearRect (50,50, width, height)'를'clearRect (0,0, width, height)'로 변경함으로써 ... – Kaiido
@Kaiido 당신은 내가 방금 달렸고 작동하지 않았습니다. 답변을 업데이트하십시오. –