溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

使用canvas繪制一個(gè)環(huán)形進(jìn)度條效果

發(fā)布時(shí)間：2021-03-10 16:47:14 來源：億速云 閱讀：208 作者：Leah 欄目：web開發(fā)

今天就跟大家聊聊有關(guān)使用canvas繪制一個(gè)環(huán)形進(jìn)度條效果，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

代碼如下：

<!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繪制環(huán)形進(jìn)度條</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;
  }
  // 定義開始點(diǎn)的大小
  var startArc = Math.PI*1.5;
  // 根據(jù)占的比例畫圓弧
  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繪制一個(gè)環(huán)形進(jìn)度條效果

看完上述內(nèi)容，你們對(duì)使用canvas繪制一個(gè)環(huán)形進(jìn)度條效果有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手