Question

我的问题是如何使用画布创建进度条的背景，如下图所示：

我已经为它编写了代码，但我认为有更好的方法，例如我想知道我是否可以使用一个画布来执行此代码：

$(document).ready(function () {
    var canvasAnimation = document.getElementById("animation");
    var ctxAnimation = canvasAnimation.getContext("2d");
    ctxAnimation.beginPath();
    ctxAnimation.arc(75, 75, 65, 0, 2 * Math.PI);
    ctxAnimation.lineWidth = 10;
    ctxAnimation.strokeStyle = "#F3F3F3";
    ctxAnimation.stroke();

    var canvasBackground = document.getElementById("background");
    var ctxBackground = canvasAnimation.getContext("2d");
    ctxBackground.beginPath();
    ctxBackground.arc(75, 75, 65, 1.2, 2 * Math.PI);
    ctxBackground.lineWidth = 10;
    ctxBackground.strokeStyle = "#1ABC9C";
    ctxBackground.stroke();
})

.my-container{
                position:relative;
                width:150px;
                height:150px;
                margin:50px auto;
            }
            canvas{
                position:absolute;
                top:0;
                left:0;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="my-container">
    <canvas id="background" width="150" height="150"></canvas>
    <canvas id="animation" width="150" height="150"></canvas>
</div>

第二个问题：

第二个问题是我想让我的中风border-radius像上面的图像

Answer 1

使用单个画布绝对可以实现。您只需要删除第二个画布及其上下文，并用ctxAnimation替换对ctxBackground的任何引用。这是有效的，因为Canvas API（如SVG）使用painter's rendering model：

Paint在连续操作中应用于输出设备每个操作都在输出设备的某个区域上绘制。什么时候该区域与先前涂漆的区域重叠，新涂料部分或完全掩盖了旧的。

在您的示例中，如果我们首先绘制浅灰色圆圈，然后绘制青色线，则将在圆圈上绘制青色线。通过应用此技术，我们得到以下代码：

const canvas = document.getElementById("animation");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(75, 75, 65, 0, 2 * Math.PI);
ctx.lineWidth = 10;
ctx.strokeStyle = "#F3F3F3";
ctx.stroke();

ctx.beginPath();
ctx.arc(75, 75, 65, 1.2, 2 * Math.PI);
ctx.lineWidth = 10;
ctx.strokeStyle = "#1ABC9C";
ctx.stroke();

至于启用＆＃34; border-radius＆＃34;效果，您可以将lineCap属性设置为round：ctx.lineCap = "round";

Here's a fiddle of the final code.

您可能想查看一些画布文档here.

Answer 2

Monica的答案很棒，您也可以使用SVG的stroke-dashoffset和stroke-dasharray属性来实现这一目标

Check out this pen for an example

这是用两个SVG圆圈构建的，既没有填充，也只有笔划，因此它们的中心是空白的，底部圆圈的颜色是笔划。

当点击填充按钮时，它会向顶部圆圈添加一个.filled类，它会使用覆盖整个圆圈的短划线在笔划中设置动画，以便更好地解释其工作原理，{{3 }}

背景进度条画布

第二个问题：

2 个答案: