Круглое изображение в круглом индикаторе хода [CANVAS] - PullRequest
0 голосов
/ 17 декабря 2018

Я попытался создать круговую диаграмму выполнения и круглое изображение, используя холст отдельно, но я попытался соединить их вместе, и результат не тот, который я хотел.Я надеюсь, что если завершено 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>

1 Ответ

0 голосов
/ 17 декабря 2018
  1. Чтобы получить остальную часть черного круга, вам нужно нарисовать еще один черный круг внизу.Также: не закрывайте путь.Это дает вам уродливые углы менее чем на 50%
  2. Я добавил context.fillStyle для текста и выравниваю текст по центру
  3. , хотя вижу ваше изображение в коде ручкиЯ не могу видеть это в ТАК.Пожалуйста, проверьте это на своем компьютере.Изображение является круглым.Поскольку текст был под изображением, я добавил 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...