背景进度栏画布

Question

My question is how to create background of progress bar with canvas like this image:

I've already written code for it, but I think there's a better way, for example I'd like to know if I can do this code with one canvas or not:

 $(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> 

Second problem:

The second problem is I'd like to make my stroke have border-radius like image above

Answer 1

This is definitely possible using a single canvas. You just need to remove the second canvas and its context, and replace any reference to ctxBackground with ctxAnimation. This works because the Canvas API, like SVGs, use a painter's rendering model :

Paint is applied in successive operations to the output device such that each operation paints over some area of the output device. When the area overlaps a previously painted area the new paint partially or completely obscures the old.

In your example if we draw the light grey circle first, and then the teal line, the teal line will be painted over the circle. By applying this technique, we get the following code:

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();

As for enabling a "border-radius" effect, you can set the lineCap property to round: ctx.lineCap = "round";

Here's a fiddle of the final code.

You might want to check out some of the canvas documentation here.

Answer 2

Monica's answer is great, you could also achieve this using SVG's stroke-dashoffset and stroke-dasharray properties

Check out this pen for an example

This is built with two SVG circles, neither have fill, they only have stroke so their centre is blank, the bottom circle has it's stroke colored.

When the fill button is clicked it adds a class of .filled to the top circle, it animates in the stroke using a dash that covers the entire circle, for a better explanation of how this works, read this article