时间戳

首页 > 解决方案 > 帆布进度轮

canvas - 帆布进度轮

问题描述

我正在尝试制作一个与给定模型相匹配的进度轮

https://imgur.com/a/UxiOSJh

进展至今...

https://imgur.com/a/hJDmASt

我与另一个开发人员和一些 googlin 关系密切，但不确定如何完成模型。主要是通过在一个较小的圆圈中完成圆圈并将圆圈的百分比基于外部变量。

我的想法是，我将根据 6 的倍数进行一些数学运算。因此，如果用户是 1/6，则该图是 16.6 完整的。3/6 50% 等等。需要知道我可以在哪里输入。

var counter = document.getElementById('counter').getContext('2d');
var no = 50; // Starting Point
var pointToFill = 4.72; //Point from where you want to fill the circle
var cw = counter.canvas.width; //Return canvas width
var ch = counter.canvas.height; //Return canvas height
var diff; // find the different between current value (no) and trageted value (100)

function fillCounter() {
  diff = ((no / 100) * Math.PI * 2 * 10);
  counter.clearRect(0, 0, cw, ch); // Clear canvas every time when function is call
  counter.lineWidth = 15; // size of stroke

  counter.fillStyle = '#000'; // color that you want to fill in counter/circle
  counter.strokeStyle = '#489DA0'; // Stroke Color
  counter.textAlign = 'center';
  counter.font = "25px monospace"; //set font size and face
  counter.lineCap = "round";
  counter.fillText(no + '%', 100, 110); //fillText(text,x,y);
  counter.beginPath();
  counter.arc(100, 100, 90, pointToFill, diff / 10 + pointToFill); //arc(x,y,radius,start,stop)

  counter.stroke(); // to fill stroke

  // now add condition

  if (no >= 80) {
    clearTimeout(fill); //fill is a variable that call the function fillcounter()}
    no++;
  }
}

//now call the function
var fill = setInterval(fillCounter, 100); //call the fillCounter function after every 50MS
<canvas height="200" width="200" id="counter">

标签： canvas

解决方案

我认为你已经非常接近了，你所需要的只是较小的线圈。

这是您的操作方法：

var counter = document.getElementById('counter').getContext('2d');
var no = 50; // Starting Point
var pointToFill = 4.72; //Point from where you want to fill the circle
var cw = counter.canvas.width; //Return canvas width
var ch = counter.canvas.height; //Return canvas height
var diff; // find the different between current value (no) and trageted value (100)

function fillCounter() {
  diff = ((no / 100) * Math.PI * 2 * 10);
  counter.clearRect(0, 0, cw, ch); // Clear canvas every time when function is call

  counter.fillStyle = '#000'; // color that you want to fill in counter/circle
  counter.strokeStyle = '#489DA0'; // Stroke Color
  counter.textAlign = 'center';
  counter.font = "25px monospace"; //set font size and face
  counter.lineCap = "round";
  counter.fillText(no + '%', 100, 110); //fillText(text,x,y);

  counter.beginPath();
  counter.lineWidth = 2;
  counter.arc(100, 100, 90, 0, Math.PI * 2)
  counter.stroke();

  counter.beginPath();
  counter.lineWidth = 15; // size of stroke
  counter.arc(100, 100, 90, pointToFill, diff / 10 + pointToFill);
  counter.stroke();
}


fillCounter()
<canvas height="200" width="200" id="counter">

现在我们有 2 个圆弧，一个是完整的圆 ( lineWidth = 2)
，第二个是带有 ( lineWidth = 15)的部分圆弧

推荐阅读