Question

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

我是画布的新手，我非常感激可以学习画布的任何地方或与网页设计相关的任何类似技术。

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

感谢您的帮助！

干杯！

[EDIT]：我必须指出，我不需要任何建议我使用图书馆的答案，这是一种学习经验，所以我不想使用图书馆。

<!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>

Answer 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;}

<canvas id="myCanvas" width="500" height="200"></canvas>

圆形进度栏中的圆形图像[CANVAS]

1 个答案: