HTML5画布显示圆圈滞后
HTML5画布显示圆圈滞后
提问于 2018-08-09 00:59:23
我正在尝试设置一些画布圆周百分比值超过基本的猫头鹰旋转木马，我面临的问题是当你滚动时滞后，有一些值不会显示，直到他们到达旋转木马的第一个位置，有人知道如何解决这个问题吗？
下面有一张图片，为了解释我所说的，我还添加了代码片段，这样你就可以查看它了。
谢谢大家。
/* 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51751978
复制相关文章
相似问题
腾讯云开发者
