溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關使用canvas繪制一個環形進度條效果，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>canvas繪制環形進度條</title>
<style type="text/css">
.chartbox{width: 100px;margin: 100px auto;}
.myChart{width:100px;height: 100px;}
</style>
</head>
<body>
<div class="chartbox">
<canvas class="myChart" id="myChart" width="100%" height="100%" data-total="100" data-curr="29.45"></canvas>
</div>
<script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
(function($, window, undefined) {
$.fn.ringChart = function(options) {
var defaults = { };
var settings = $.extend({}, defaults, options);
var canvas = $(this).get(0);
var total = $(this).attr("data-total");
var curr = $(this).attr("data-curr");
var constrast = parseFloat(curr/total).toFixed(2); //比例
var context = null;
if ( !canvas.getContext) {
return;
}
// 定義開始點的大小
var startArc = Math.PI*1.5;
// 根據占的比例畫圓弧
var endArc = (Math.PI * 2) * constrast;
context = canvas.getContext("2d");
// 圓心文字
context.font="28px Arial";
context.fillStyle = '#ff801a';
context.textBaseline = 'middle';
var text=(Number(curr/total)*100).toFixed(0)+"%";
var tw=context.measureText(text).width;
context.fillText(text,50-tw/2,50);
// 繪制背景圓
context.save();
context.beginPath();
context.strokeStyle = "#e7e7e7";
context.lineWidth = "4";
context.arc(50, 50, 44, 0, Math.PI * 2, false);
context.closePath();
context.stroke();
context.restore();
// 若為百分零則不必再繪制比例圓
if ( curr / total == 0) {
return;
}
// 繪制比例圓
context.save();
context.beginPath();
context.strokeStyle = "#ff801a";
context.lineWidth = "4";
context.arc(50, 50, 44, startArc, (curr % total == 0 ? startArc : (endArc+startArc)), false);
context.stroke();
context.restore();
}
})($, window);
$("#myChart").ringChart();
</script>
</body>
</html>效果如下：
看完上述內容，你們對使用canvas繪制一個環形進度條效果有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
