使Arc Canvas具有響應能力

Question

我有兩個問題，第一個問題是如何使此倒數計時響應。 我嘗試使用Bootstrap使其具有響應性，但無法獲得令人滿意的結果。

注意：您可以刪除我的樣式，並根據需要從頭開始。

---

當我將圓的半徑從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> 

注意：

• 請全頁運行代碼
• 每次會話后等待1分鍾，即發生半徑問題

Answer 1

使用clearRect(0,0,width,height)代替clearRect(50,50,width,height) 。

 (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(0, 0, 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(0, 0, 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(0, 0, 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(0, 0, 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/2.1.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>