[英]HTML5 canvas circle lag on display
我正在嘗試在基本的貓頭鷹Caroussel上設置一些畫布圓百分比值，當滾動時，我面臨的問題是滯后，有些值直到它們到達Caroussel的第一位才會顯示，有誰知道如何解決這個問題？
下方有一張圖片，以解釋我在說什么，我還添加了代碼段代碼，因此您可以查看一下。
感謝大家。
/* OWL CAROUSSEL JS*/ $(document).ready(function() { $(".owl-carousel").owlCarousel({ loop: true, margin: 20, nav: true, dots: true, responsive: { 0: { items: 1 }, 600: { items: 3 }, 1000: { items: 5 } } }); }); /* CANVAS JS */ function progressSim(id, percent) { var ctx = document.getElementById(id).getContext('2d'), cw = ctx.canvas.width, ch = ctx.canvas.height, al = 0, sim = setInterval(progress, 25); function progress() { var start = 4.72, diff = ((al / 100) * Math.PI * 2 * 10).toFixed(2); ctx.clearRect(0, 0, cw, ch); ctx.lineWidth = 7; ctx.fillStyle = '#000'; ctx.strokeStyle = "#000"; ctx.textAlign = 'center'; ctx.font = "30px Arial"; ctx.fillText(al + '%', cw * .5, ch * .5 + 2, cw); ctx.beginPath(); ctx.arc(80, 80, 70, start, diff / 10 + start, false); ctx.stroke(); if (al >= percent) { clearTimeout(sim); // Add scripting here that will run when progress completes } al++; }; } progressSim('my_canvas1', 65); progressSim('my_canvas2', 80); progressSim('my_canvas3', 90); progressSim('my_canvas4', 15); progressSim('my_canvas5', 35); progressSim('my_canvas6', 68); progressSim('my_canvas7', 89); progressSim('my_canvas8', 14);
.item { width: 200px; height: 230px; background-color: orange; padding: 10px 10px 10px 10px; } #container { width: 100%; height: 550px; background-color: #d82c2e; position: relative; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head> <!--BS CSS--> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <!--BS JS--> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <!--OWL CSS--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"> </head> <body> <div id="=container"> <div class="owl-carousel owl-theme"> <div class="item"> <h4>Value 1 </h4><canvas id="my_canvas1" width="170" height="170"></canvas></div> <div class="item"> <h4>Value 2 </h4><canvas id="my_canvas2" width="170" height="170"></canvas></div> <div class="item"> <h4>Value 3 </h4><canvas id="my_canvas3" width="170" height="170"></canvas></div> <div class="item"> <h4>Value 4 </h4><canvas id="my_canvas4" width="170" height="170"></canvas></div> <div class="item"> <h4>Value 5 </h4><canvas id="my_canvas5" width="170" height="170"></canvas></div> <div class="item"> <h4>Value 6 </h4><canvas id="my_canvas6" width="170" height="170"></canvas></div> <div class="item"> <h4>Value 7 </h4><canvas id="my_canvas7" width="170" height="170"></canvas></div> <div class="item"> <h4>Value 8 </h4><canvas id="my_canvas8" width="170" height="170"></canvas></div> </div> </div> <!--OWL JS--> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> </body> </html>
設置為循環時，將克隆owl carousel中的項目，最終將產生多個id="my_canvas1" ，這會產生沖突，但更重要的是，在您調用自己的DOM中，克隆的元素甚至不存在函數progressSim（id，percent）
如果您有可以編輯的Codepen或jsfiddle示例，我可以仔細看看。
請在下面的步驟中找到帶有帆布物品的貓頭鷹傳送帶的工作示例 ：
貓頭鷹輪播會創建上一個/下一個項目的克隆，以允許組循環（例如，比單擊導航球要多）。 結果，您將看到項目的克隆，但是在簡單克隆canvas元素期間，將不會克隆圖像。
因此，您需要為每個克隆的元素初始化canvas（調用progressSim() ），但是例如插件不允許您僅獲取克隆的元素，您可以按類cloned對其進行過濾，或者對已初始化的項目使用flag（我更喜歡第二個方式）。
您為輪播的每個項目都設置了一個“ id”屬性，這是個壞主意，因為您可以在DOM中獲得相同id重復項 （執行克隆操作）。
最好對所有項目使用相同的類，並只調用一次progressSim() ，而不是分別對所有項目調用一次，因為項目的數量可以是動態的。
貓頭鷹旋轉木馬與畫布的例子的小提琴
在JS代碼部分中查看一些注釋
使用html5畫布在圓圈中以不同角度顯示不同的值
[英]Display different values at different angles in a circle using html5 canvas
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.