canvas 中的径向百分比栏

Question

请多多包涵，因为我是 Canvas 的新手，只是在尝试。

我正在尝试在 html Canvas 中制作一个径向百分比条，并使用动画使其从 1 个角度开始并以定义的结束角度结束（它不是圆就像一块馅饼被取出来一样）

我只是通过对数字进行反复试验，将角度设置为与底部成 45 度角。我想做的是根据定义的百分比使内弧动画圆形，但我找不到 "rotate" 它的正确数字。

我还需要能够改变内弧的颜色。

我苦苦挣扎的另一件事是如何在不破坏动画的情况下将外部静态条从动画中移除。

HTML:

<canvas id="myCanvas" width="250" height="250"></canvas>

脚本：

var canvas = document.getElementById('myCanvas');
 var context = canvas.getContext('2d');
 var x = canvas.width / 2;
 var y = canvas.height / 2;
 var radius = 75;
 var endPercent = 100;
 var curPerc = 0.75 * Math.PI;
 var counterClockwise = false;
 var circ = Math.PI * 2;
 var quart = Math.PI / 2;
 var startAngle = 0.75 * Math.PI;
 var endAngle = 2.25 * Math.PI;

 context.lineWidth = 10;
 context.strokeStyle = '#ad2323';


 function animate(current) {
     context.clearRect(0, 0, canvas.width, canvas.height);
     context.beginPath();
     context.arc(x, y, radius, startAngle, endAngle, false);
     context.stroke();
     context.closePath();

     context.beginPath();
     context.arc(x, y, 50, 0, ((circ) * current) - 0.5 * Math.PI, false);
     context.stroke();
     context.closePath();
     curPerc++;
     if (curPerc < endPercent) {
         requestAnimationFrame(function () {
             animate(curPerc / 100)
         });
     }
 }

http://jsfiddle.net/susannalarsen/Lnav9w49/

Answer 1

所以经过一些重构后，答案看起来像：

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

var parameters = {
    center: { x: canvas.width / 2,
        y: canvas.height / 2
    },
    innerRadius: 50,
    outerRadius: 75,
    innerColor: '#ad2323',
    outerColor: '#DE4040',
    startPercent: 45,
    endPercent: 100,
    lineWidth: 10
};


//
var curPerc = parameters.startPercent;
animate();

// ----------------------------------------

function animate(current) {
    context.clearRect(0, 0, canvas.width, canvas.height);

    drawInnerCircle(curPerc);

    drawOuterCircle();

    curPerc++;
    if (curPerc < parameters.endPercent) {
        requestAnimationFrame(function () {
            animate(curPerc);
        });
    }
}

function drawInnerCircle(curr) {
    var startAngle = percentToAngle(parameters.startPercent);
    var endAngle = percentToAngle(curr);
    context.lineWidth = parameters.lineWidth;
    context.strokeStyle = parameters.innerColor;
    context.beginPath();
    context.arc(parameters.center.x, parameters.center.y, parameters.innerRadius, startAngle, endAngle, false);
    context.stroke();
}

function drawOuterCircle() {    
    var startAngle = percentToAngle(parameters.startPercent);
    var endAngle = percentToAngle(parameters.endPercent);
    context.lineWidth = parameters.lineWidth;
    context.strokeStyle = parameters.outerColor;
    context.beginPath();
    context.arc(parameters.center.x, parameters.center.y, parameters.outerRadius,  startAngle, endAngle, false);
    context.stroke();
}

function percentToAngle(perc) {
    return perc * 2 * Math.PI / 100;
}

   body {
       margin: 0px;
       padding: 0px;
       background: #f1ecec;
   }

<canvas id="myCanvas" width="250" height="250"></canvas>

canvas 中的径向百分比栏

radial percentage bar in canvas

html

javascript

canvas

html5-canvas