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