HTML5 canvas 圆圈显示滞后

Question

我正在尝试在基本 owl 旋转木马上设置一些 canvas 圆圈百分比值，我面临的问题是滚动时出现滞后，有些值不适用直到他们到达轮播的第一位才显示，有人知道如何解决这个问题吗？

下面有一张图片，为了解释我在说什么，我还添加了代码片段，所以你可以看看。

谢谢大家

/* 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>

Answer 1

当设置为循环时，owl 轮播中的项目被克隆，你最终会得到多个 id="my_canvas1" 这会产生冲突，但更重要的是，克隆的元素甚至不会在调用函数时存在于 DOM progressSim(id, percent)

如果您有我可以编辑的 codepen 或 jsfiddle 示例，我可以仔细查看。

Answer 2

请在下面的步骤中找到 owl 带有 canvas 个项目 轮播的工作示例：

Owl 旋转木马 创建 previous/next 项目的克隆 以允许组循环（例如，比您单击导航球）。结果您看到项目的克隆，但在 canvas 元素的简单克隆期间，图像不会被克隆。
所以你需要为每个克隆的元素初始化canvas（调用progressSim()），但是比如插件不允许你只获取克隆的元素，你可以通过 class cloned 过滤它们或对已初始化的项目使用标志（我更喜欢第二种方式）。
你为轮播的每个项目设置一个"id"属性，这是个坏主意，因为你可以得到重复id in DOM（克隆）。
最好对所有项目使用相同的class并且只调用progressSim()一次，而不是对所有项目单独调用，因为项目数量可以是动态的。

Fiddle of example of owl carousel with canvas
Take a look some comments in JS code section

Github issue connected with this question.

HTML5 canvas 圆圈显示滞后

HTML5 canvas circle lag on display

html

javascript

canvas

owl-carousel