Question

请耐心等待我，因为我是Canvas的新手并且正在尝试。

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

我只是使用试验和错误的数字将角度设置在离底部45度的位置。我想要做的是根据它定义的百分比使内弧成为圆形，但我找不到合适的数字来“旋转”它。

此外，我需要能够改变内弧的颜色。

我正在努力解决的另一件事是如何在不破坏它的情况下将动态外部静态条带移出。

HTML：

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

SCRIPT：

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>

画布中的径向百分比条

1 个答案: