Javascript 动画期间画布的背景可见

多亏了另一位如此热心地帮助我完成这项任务的SO，我有了一个画布元素，成功地以我想要的方式制作了一个圆圈的动画。但是，当动画发生时，画布的背景是可见的，因此覆盖了画布后面的任何内容。我知道canvas默认有透明的背景，但我认为这实际上是不相关的

请参见下面的示例，了解在初始动画中所取得的成就和发生的错误

我相信有关守则如下：

function convertToRadians(degree) {
    return degree*(Math.PI);
}

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

function showProgress(percent){
    console.log(percent);
    var centerX = canvas.width / 2;
    var centerY = canvas.height / 2;
    var sections = 6;
    var radius = 106;

    context.beginPath();
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    var grd = context.createLinearGradient(canvas.width, 0, 0, canvas.height);
    grd.addColorStop(0, '#d586f4');   
    grd.addColorStop(1, '#5c00d2');
    context.fillStyle = grd;
    context.fill();

    context.beginPath();
    if (percent){
        var amt = ((2 / 100) * percent) + 1.5;
        if (amt > 2) amt = amt - 2;
        context.arc(centerX, centerY, radius, amt * Math.PI, 1.5 * Math.PI, false); //25%
    } else context.arc(centerX, centerY, radius, 0 * Math.PI, 2 * Math.PI, false); //0%

    context.lineWidth = (radius - .3) * 2;
    context.strokeStyle = '#ffffff';
    context.stroke();
}

var timer = setInterval(function(){ runTimer() }, 20);
var t = 0;

function runTimer(){
    if (t == 101) stopTimer();
    context.clearRect(0, 0, canvas.width, canvas.height);
    showProgress(t);
    t++;
}

function stopTimer() {
    clearInterval(myVar);
}

---

有人能找出为什么白色会覆盖其他元素吗？

请检查下面的提琴。我已经在那里更新了

试试这个：

函数toRad（度）{返回度*（Math.PI/180）；}
函数映射（值、最小值、最大值、最小值、最大值）{
返回值（value-minIn）*（maxOut-minOut）/（maxIn-minIn）+minOut；
}
var canvas=document.getElementById（'progress'）；
var context=canvas.getContext（'2d'）；
功能显示进度（百分比）{
var centerX=canvas.width/2；
var centerY=canvas.height/2；
var段=6；
var半径=94；
context.beginPath（）；
弧（中心x，中心y，半径，环面（-90），环面（映射（百分比，01100，-90270）），假）；
var grd=context.createLinearGradient（canvas.width，0,0，canvas.height）；
grd.addColorStop（0，#d586f4'）；
grd.addColorStop（1，#5c00d2'）；
context.lineWidth=22；
context.strokeStyle=grd；
stroke（）；
}
函数runTimer（）{
如果（t==101）stopTimer（）；
clearRect（0，0，canvas.width，canvas.height）；
显示进度（t）；
t++；
}
函数stopTimer（）{clearInterval（timer）；}
var timer=setInterval（函数（）{runTimer（）；}，20）；
var t=0
html，正文{
背景:#f5；
}
#集装箱的进展{
位置：绝对位置；
边界半径：50%；
宽度：240px；
高度：240px；
最高：50%；
左：50%；
利润上限：-120px；
左边距：-120px；
背景：#D0D2D5；
背景：-莫兹线性梯度（顶部，#d0d2d5 0%，#ffffff 100%）；
背景：-webkit渐变（线性、左上、左下、颜色停止（0%，#d0d2d5）、颜色停止（100%，#ffffff））；
背景：-webkit线性梯度（顶部，#d0d2d5 0%，#ffffff 100%）；
背景：-o-线性梯度（顶部，#d0d2d5 0%，#ffffff 100%）；
背景：-ms线性梯度（顶部，#d0d2d5 0%，#ffffff 100%）；
背景：线性梯度（至底部，#d0d2d5 0%，#ffffff 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#d0d2d5'，endColorstr='#ffffff'，GradientType=0）；
-webkit盒阴影：插入0px 1px 2px 0px rgba（0,0,0,0.15）；
-moz盒阴影：插入0px 1px 2px 0px rgba（0,0,0,0.15）；
盒影：插入0px 1px 2px 0px rgba（0,0,0,0.15）；
z指数：5；
}
#进度表{
位置：绝对位置；
边界半径：50%；
宽度：212px；
身高：212px；
利润率：14px；
-webkit盒阴影：嵌入0px 3px 5px 0px rgba（5,71,110,0.51），嵌入0px 0px 19px 0px rgba（0,0,0.2）；
-moz盒阴影：嵌入0px 3px 5px 0px rgba（5,71,110,0.51），嵌入0px 0px 19px 0px rgba（0,0,0,0.2）；
盒影：嵌入0px 3px 5px 0px rgba（5,71,110,0.51），嵌入0px 0px 19px 0px rgba（0,0,0,0.2）；
z指数：6；
}
#进步与阴影{
位置：绝对位置；
边界半径：50%；
宽度：212px；
身高：212px；
利润率：14px；
-webkit盒阴影：嵌入0px 3px 5px 0px rgba（5,71,110,0.51），嵌入0px 0px 19px 0px rgba（0,0,0.2）；
-moz盒阴影：嵌入0px 3px 5px 0px rgba（5,71,110,0.51），嵌入0px 0px 19px 0px rgba（0,0,0,0.2）；
盒影：嵌入0px 3px 5px 0px rgba（5,71,110,0.51），嵌入0px 0px 19px 0px rgba（0,0,0,0.2）；
z指数：8；
}
#进展{
位置：绝对位置；
利润率：9px；
z指数：7；
}
#进展与内容{
位置：绝对位置；
边界半径：50%；
宽度：170px；
高度：170px；
利润率：21px；
背景#fafb；
背景图片：url（“//images.domain.com/_index/bg noise.png”）；
背景图像：url（“//images.domain.com/_index/bg noise.png”），-webkit渐变（线性、左上、左下、颜色停止（0%、#fafafb）、颜色停止（100%、#e1e2e5））；
背景图片：url（“//images.domain.com/_index/bg noise.png”），-webkit线性渐变（顶部，#fafafb 0%，#e1e2e5 100%）；
背景图片：url（“//images.domain.com/_index/bg noise.png”），-moz线性渐变（顶部，#fafafb 0%，#e1e2e5 100%）；
背景图片：url（“//images.domain.com/_index/bg noise.png”），-o-linear-gradient（顶部，#fafafb 0%，#e1e2e5 100%）；
背景图片：url（“//images.domain.com/_index/bg noise.png”），-ms线性梯度（顶部，#fafafb 0%，#e1e2e5 100%）；
背景图片：url（“//images.domain.com/_index/bg noise.png”）、线性渐变（到底部，#fafafb 0%，#e1e2e5 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#fafafb'，endColorstr='#e1e2e5'，GradientType=0）；
-webkit盒阴影：0px 0px 19px 0px rgba（0,0,0,0.2），0px 0px 3px 1px rgba（0,0,0,0.3），插图0px-1px 2px 1px rgba（32,46,61,0.9）；
-moz盒阴影：0px 0px 19px 0px rgba（0,0,0,0.2），0px 0px 3px 1px rgba（0,0,0,0.3），嵌入0px-1px 2px 1px rgba（32,46,61,0.9）；
盒影：0px 0px 19px 0px rgba（0,0,0,0.2），0px 0px 3px 1px rgba（0,0,0,0.3），插图0px-1px 2px 1px rgba（32,46,61,0.9）；
z指数：9；
}
h1#进度#百分比{
位置：相对位置；
利润率：35px0；
z指数：10；
文本阴影：0px 1px 1px#fff；
显示：块；
颜色：#777；
字体系列：'opensans'，Sans serif；
字号：800；
字体大小：60px；
填充：0；
文本对齐：居中；
宽度：170px；
}
h1#进度百分比：之前{
内容：attr（title）；
位置：绝对位置；
显示：块；
颜色：rgba（255、255、255、.4）；
文本对齐：居中；
宽度：170px；
文本阴影：无；
顶部：1px；
左：1px；
}
h2#进展
function convertToRadians(degree) {
        return degree*(Math.PI);
    }

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

    function showProgress(percent){
        console.log(percent);
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var sections = 6;
        var radius = 106;

        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        var grd = context.createLinearGradient(canvas.width, 0, 0, canvas.height);
        grd.addColorStop(0, '#d586f4');   
        grd.addColorStop(1, '#5c00d2');
        context.fillStyle = grd;
        context.fill();

        context.beginPath();
        if (percent){
            var amt = ((2 / 100) * percent) + 1.5;
            if (amt > 2) amt = amt - 2;
            context.arc(centerX, centerY, radius, amt * Math.PI, 1.5 * Math.PI, false); //25%
        } else context.arc(centerX, centerY, radius, 0 * Math.PI, 2 * Math.PI, false); //0%

        context.lineWidth = (radius - .3) * 2;
        context.strokeStyle = '#ffffff';
        context.stroke();
    }

    var timer = setInterval(function(){ runTimer() }, 20);
    var t = 0;

    function runTimer(){
        if (t == 101) stopTimer();
        context.clearRect(0, 0, canvas.width, canvas.height);
        showProgress(t);
        t++;
    }

    function stopTimer() {
        clearInterval(myVar);
    }