Сделать индикатор выполнения Html5 Canvas кругом из полукруга
Я создаю один индикатор выполнения, используя Html5 Canvas, где мне нужно показать индикатор выполнения на основе предоставленного значения. Теперь пользователь установил какое-то значение, и на его основе индикатор выполнения должен завершить прогресс.
Я нашел код в Google и попытался реализовать то же самое, но поскольку у меня нет особого представления о холсте Html5. Нужна ваша помощь, чтобы сделать то же самое.
Текущий код показывает прогресс в виде полукруга только до 45 градусов.
ниже приведены скриншоты БЮР.
var
canv = document.getElementById('canv'),
ctx = canv.getContext('2d');
canv.width = 400;
canv.height = 400;
var
center_x = canv.width / 2,
center_y = canv.height + 50,
radius = 150;
ctx.lineWidth = 15;
ctx.strokeStyle = '#492528';
ctx.beginPath();
ctx.arc(center_x, center_y, radius, 0, Math.PI, true);
//ctx.arc(100, 75, 50, 0, Math.PI + 0.2, true);
ctx.stroke();
var
l_ = -2.93,
l_t = -2.3,
simpleAnimationTimer = setInterval(function() {
ctx.fillStyle = '#301618';
ctx.beginPath();
ctx.arc(center_x, center_y, radius, l_, Math.PI, true);
ctx.lineTo(center_x - 10, center_y);
//ctx.lineTo(center_x, center_y - 20);
ctx.fill();
var
grad = ctx.createRadialGradient(center_x, center_y, 50, center_x, center_y, radius);
// grad.addColorStop(0.2, 'rgba(246,178,86, 0.2)');
// grad.addColorStop(0.3, 'rgba(246,178,86, 0.1)');
// grad.addColorStop(.5, 'rgba(45, 14, 16, 0.5)');
grad.addColorStop(1, '#53301A');
grad.addColorStop(0, 'rgba(90, 14, 16, 1)');
ctx.fillStyle = grad;
ctx.beginPath();
ctx.arc(center_x, center_y, radius, l_, Math.PI + 0.2, true);
ctx.lineTo(center_x - 20, center_y);
ctx.lineTo(center_x, center_y - 40);
ctx.fill();
ctx.lineWidth = 15;
ctx.strokeStyle = '#F7B349';
ctx.beginPath();
ctx.arc(center_x, center_y, radius, l_, Math.PI + 0.2, true);
ctx.stroke();
l_ += .01;
if (l_ > -2.30) {
clearInterval(simpleAnimationTimer);
}
}, 20);
function drawTick(angle, from, to) {
var
angle = angle, // 168 is start
xs = center_x + radius * Math.cos(-angle * Math.PI) * from,
ys = center_y + radius * Math.sin(-angle * Math.PI) * from,
xe = center_x + radius * Math.cos(-angle * Math.PI) * to,
ye = center_y + radius * Math.sin(-angle * Math.PI) * to;
ctx.lineWidth = 1;
ctx.strokeStyle = '#8A6047';
ctx.beginPath();
ctx.moveTo(xs, ys);
ctx.lineTo(xe, ye);
ctx.stroke();
}
// first level outer ticks
for (i = 0; i < 157; i++) {
drawTick(168 - i * 1, 1.1, 1.06);
}
// dots
for (i = 0; i < 157; i++) {
drawTick(168 - i * 1, 1.25, 1.255);
}
ctx.lineWidth = 1;
ctx.strokeStyle = '#603738';
ctx.beginPath();
ctx.arc(center_x, center_y, radius + 55, -0.2, Math.PI + 0.2, true);
ctx.stroke();
// first level outer ticks
for (i = 0; i < 58; i++) {
drawTick(167 - i * 2.7, 1.3, 1.35);
}body {
margin: 0;
}<canvas id = "canv">Your browser not support canvas.</canvas>Как я уже понял, изменение условия if на clearTimeout() дает определенный результат. if ( l_ > -1.30 ) { clearInterval(simpleAnimationTimer); } }, 20); Создает более вытянутый полукруг.
Я нигде не вижу 45 градусов, когда запускаю ваш код. Не могли бы вы объяснить немного точнее, чего вы хотите достичь?
@M.Riyan: Как я уже упоминал в вопросе, я взял этот код с какого-то сайта. Я новичок в холсте.
@AHaworth: Я приложил один скриншот, на котором индикатор выполнения показывает только до 45 градусов. Здесь мне нужно 2 вещи: а. Этот полукруг должен быть показан как полный круг b. Индикатор выполнения отображается полностью на основе некоторого предоставленного числа. например: пользователь ввел любое число, например 100, 200 и т. д., и на его основе индикатор выполнения должен завершиться.
проверьте jsfiddle.net/0m2qfoeu
Я хотел сказать, что это не 45 градусов. Это важно, потому что вы пытаетесь показать пользователю измерение. И мне не совсем понятно, что это за единицы.
@AHaworth: Как я уже упоминал ранее, я взял этот код с какого-то другого веб-сайта, меня не беспокоят измерения, мне просто нужно, чтобы индикатор выполнения отображался там как полный круг, а индикатор выполнения должен заполняться пользователем, предоставленным пользователем. ценить. Также не беспокойтесь о единицах
@ashutoshrathi: Предоставленная вами ссылка на jsfiddle наиболее похожа на мое требование. Просто нужно здесь передать любое максимальное значение, и на основе этого значения индикатор выполнения должен завершить его.
Вы упомянули, что новичок в работе с холстом... Знаете ли вы, какие параметры есть в функции дуги: ctx.arc(center_x, center_y, radius, l_, Math.PI + 0.2, true); ?? Вам нужно было понять это, прежде чем задавать вопрос о коде, который вы взяли с какого-то случайного сайта.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Если вы новичок, вам нужны основы arc, прежде чем вы сможете добиться какого-либо прогресса:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc
arc(x, y, radius, startAngle, endAngle, counterclockwise)
Метод arc() создает дугу окружности с центром в точке (x, y) и радиусом радиуса. Путь начинается в startAngle, заканчивается в endAngle и движется в направлении, заданном против часовой стрелки (по умолчанию — по часовой стрелке).
Параметры
х
Горизонтальная координата центра дуги.да
Вертикальная координата центра дуги.радиус
Радиус дуги. Должно быть позитивным.startAngle
Угол начала дуги в радианах, измеренный от положительной оси X.конечный угол
Угол, под которым заканчивается дуга, в радианах, измеренный от положительной оси X.против часовой стрелки Необязательно
Необязательное логическое значение. Если true, дуга рисуется против часовой стрелки между начальным и конечным углами. По умолчанию установлено значение false (по часовой стрелке).
Теперь мы можем приступить к созданию простой анимации.
Ниже мы просто перемещаем углы вперед и назад, чтобы показать, на что мы способны.
var canv = document.getElementById('canv')
var ctx = canv.getContext('2d')
var x = canv.width / 2
var y = canv.height / 2
var radius = 60
var angle = 1
var delta = 0.05
setInterval(function() {
ctx.reset()
ctx.lineWidth = 15;
ctx.strokeStyle = 'red';
ctx.beginPath();
ctx.arc(x, y, radius, 0, angle, true);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.arc(x, y, radius - 10, 0, angle);
ctx.stroke();
ctx.fillText(Math.round(angle), x, y);
angle += delta;
if ((angle > Math.PI * 1.9) || (angle < 0.5)) {
delta *= -1
}
}, 20);<canvas id = "canv" width=160 height=160></canvas>Мы можем построить еще один пример, в котором, учитывая входные данные, он будет рисовать дугу от 0 до этого endAngle.
var canv = document.getElementById('canv')
var max = document.getElementById('input').value
var ctx = canv.getContext('2d')
var x = canv.width / 2
var y = canv.height / 2
var angle = 0
function draw() {
angle += 0.01;
ctx.reset()
ctx.lineWidth = 15;
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.arc(x, y, 60, 0, angle);
ctx.stroke();
ctx.fillText(Math.round(angle*100)/100, x, y);
if (angle > max) {
clearInterval(interval);
}
}
function inputChange() {
clearInterval(interval)
angle = 0
max = document.getElementById('input').value
interval = setInterval(draw, 20)
}
interval = setInterval(draw, 20)Goto:
<input id = "input" type = "number" value = "1.2" min = "0" max = "6.28" step=0.1 onchange = "inputChange()"/>
</br>
<canvas id = "canv" width=160 height=160></canvas>Мы должны учитывать процент прогресса и вычислять угол для создания дуги, когда мы увеличиваем прогресс.
// Draw progress circle
var endAngle = (progress / maxProgress) * 2 * Math.PI - Math.PI / 2;
ctx.beginPath();
ctx.arc(center_x, center_y, radius, -Math.PI / 2, endAngle, false);
ctx.strokeStyle = '#4caf50';
ctx.stroke();
ctx.closePath();
var canv = document.getElementById('canv'),
ctx = canv.getContext('2d');
canv.width = 400;
canv.height = 400;
var center_x = canv.width / 2,
center_y = canv.height / 2,
radius = 150;
ctx.lineWidth = 15;
ctx.strokeStyle = '#492528';
ctx.beginPath();
ctx.arc(center_x, center_y, radius, 0, 2 * Math.PI, true);
ctx.stroke();
var progress = 0;
var maxProgress = 100; // maximum progress value
var animationSpeed = 2; // speed of the animation
var simpleAnimationTimer = setInterval(function() {
ctx.clearRect(0, 0, canv.width, canv.height);
// Draw background circle
ctx.beginPath();
ctx.arc(center_x, center_y, radius, 0, 2 * Math.PI, true);
ctx.strokeStyle = '#e6e6e6';
ctx.stroke();
ctx.closePath();
// Draw progress circle
var endAngle = (progress / maxProgress) * 2 * Math.PI - Math.PI / 2;
ctx.beginPath();
ctx.arc(center_x, center_y, radius, -Math.PI / 2, endAngle, false);
ctx.strokeStyle = '#4caf50';
ctx.stroke();
ctx.closePath();
// Draw progress text
ctx.font = '20px Arial';
ctx.fillStyle = '#000';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(Math.round((progress / maxProgress) * 100) + '%', center_x, center_y);
progress += animationSpeed;
if (progress > maxProgress) {
clearInterval(simpleAnimationTimer);
}
}, 50);<!DOCTYPE html>
<html>
<head>
<title>Full Circle Progress Bar</title>
<style>
canvas {
display: block;
margin: 0 auto;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<canvas id = "canv"></canvas>
</body>
</html>проверьте скрипт: jsfiddle.net/0m2qfoeu.
Что такое
l_иl_t? Это плохое соглашение об именах. И вы сказали, что полукруг сейчас достигает 45 градусов. Так чего же ты хочешь?