圆形进度条中的圆形图像 [CANVAS]答案

【问题标题】：Circular image in a circular progress bar [CANVAS]圆形进度条中的圆形图像 [CANVAS]
【发布时间】：2018-12-17 21:44:51
【问题描述】：

我曾尝试分别使用画布创建一个圆形进度条和一个圆形图像，但我尝试将它们放在一起，结果不是我想要的。我希望的是，如果进度条的 45% 是完整的，那么完整的部分应该是粉红色的，其余的笔画必须是黑色的（剩下的 55%），而且图像必须是圆形的图片中间必须有文字。

我对画布还很陌生，如果我能在任何地方学习画布或任何与网页设计相关的类似技术，我将非常感激。

我还注意到，存在与使用画布的圆形进度条和圆形图像相关的问题，但没有一个将这两个主题结合在一起。作为此画布技术的初学者，我无法从其他主题中提取必要的信息。

感谢任何帮助！

干杯！

[编辑]：我必须指出，我不想要任何建议我使用库的答案，这是一种学习体验，所以我不想使用库。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>T</title>
</head>

<body>

    <canvas id="myCanvas" width="500" height="200"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var al = 50;
        var start = 4.72;
        var cw = context.canvas.width / 2;
        var ch = context.canvas.height / 2;
        var diff;

        function progressBar() {
            diff = (al / 100) * Math.PI * 2;
            context.clearRect(0, 0, 400, 200);



            context.fillStyle = '#000';
            context.strokeStyle = '#ff2626';
            context.textAlign = 'center';
            context.lineWidth = 10;
            context.font = '10pt Verdana';
            context.beginPath();
            context.arc(cw, ch, 55, start, diff + start, false);
            context.closePath()
            context.stroke();
            context.fillText(al + '%', cw + 2, ch + 6);

            var img = new Image();

            img.onload = function () {
                context.beginPath();
                context.arc(cw, ch, 50, 0, 2 * Math.PI, false);
                context.clip(); 
                context.closePath();
                context.strokeStyle = '#ff2626';
                context.lineWidth = 10;

                context.stroke()
                context.fillText(al + '%', cw + 2, ch + 6);

                context.drawImage(img, 0, 0);
            };

            img.src =
                "http://www.antiquiet.com/wp-content/uploads/2011/03/Free-Trapper_Remasters_The-Kills-467x311.jpg";


        }
        progressBar()
    </script>

</body>

</html>

【问题讨论】：

标签： html html5-canvas

【解决方案1】：

为了使圆圈的其余部分变为黑色，您需要在下方绘制另一个黑色圆圈。另外：不要关闭路径。这会给您带来低于 50% 的丑陋角落
我为文本添加了context.fillStyle，我正在将文本围绕中心对齐
虽然我在 codepen 中看到了您的图像，但在 SO 中看不到它。请在您的计算机中检查它。图片是圆形的。由于文字位于图片下方，因此我添加了 context.globalCompositeOperation='destination-over'; 以将文字移到图片上方。

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var al = 30;
var start = 4.72;
var cw = canvas.width / 2;
var ch = canvas.height / 2;
var diff;

function progressBar() {
  diff = al / 100 * Math.PI * 2;
  context.clearRect(0, 0, 400, 200);

  context.fillStyle = "#000";

  context.textAlign = "center";
  context.lineWidth = 10;

  // the black circle
  context.beginPath();
  context.arc(cw, ch, 55, 0, 2 * Math.PI, false);
  context.stroke();
  // the pink arc
  context.beginPath();
  context.arc(cw, ch, 55, start, diff + start, false);
  context.strokeStyle = "#ff2626";
  //context.closePath()
  context.stroke();

  context.font = "20px Verdana";
  // aligning the text around the given point
  context.textAlign = "center";
  context.textBaseline = "middle";
  context.fillStyle = "#ff2626";
  context.fillText(al + "%", cw, ch);

  var img = new Image();

  img.onload = function() {
    context.beginPath();
    context.arc(cw, ch, 55, 0, 2 * Math.PI, false);
    context.clip();
    context.closePath();

    context.globalCompositeOperation='destination-over';
    context.drawImage(img, 0, 0);
     
    context.fillText(al + "%", cw / 2, ch - 20);
  };

  img.src =
    "http://www.antiquiet.com/wp-content/uploads/2011/03/Free-Trapper_Remasters_The-Kills-467x311.jpg";
}
progressBar();

canvas{border:1px solid;}

&lt;canvas id="myCanvas" width="500" height="200"&gt;&lt;/canvas&gt;

【讨论】：

非常感谢！这行得通，而且 cmets 也很有帮助！你有什么资源可以推荐给我来了解画布吗？
对于介绍（非常基本的）试试这个：HTML5 Canvas Element Tutorial 或这本书Head First HTML5 Programming: Building Web Apps with JavaScript。
如果你已经在画布编码，试试这本书：Foundation HTML5 Animation with JavaScript
非常感谢 enxaneta！