Форум Сайтостроение Веб-строительство

Круговая диаграмма

SEO_87
На сайте с 05.08.2008
Offline
104
SEO_87
647

Нужно нарисовать круговую диаграмму с жирной точкой на конце шкалы. Сама диаграмма не проблема, решений полно, но вот как добавить эту чертову точку я не знаю. Может кто подскажет решение?

http://jsfiddle.net/Aapn8/3410/

A
На сайте с 23.11.2016
Offline
7
anzarsh
#1 

var drawCircle2 = function(color, lineWidth, percent) {
		percent = Math.min(Math.max(0, percent || 1), 1);
		ctx.beginPath();
		ctx.arc(0, 0, radius, Math.PI * 2 * percent, Math.PI * 2 * percent, false);
		ctx.strokeStyle = color;
        ctx.lineCap = 'round'; // butt, round or square
		ctx.lineWidth = lineWidth + 2
		ctx.stroke();
};

drawCircle2('red', options.lineWidth, options.percent / 100);

например можно вот это добавить, и получится как здесь - http://codepen.io/anzarsh/pen/VmoNro

SEO_87
На сайте с 05.08.2008
Offline
104
SEO_87
#2
anzarsh:
var drawCircle2 = function(color, lineWidth, percent) {

		percent = Math.min(Math.max(0, percent || 1), 1);

		ctx.beginPath();

		ctx.arc(0, 0, radius, Math.PI * 2 * percent, Math.PI * 2 * percent, false);

		ctx.strokeStyle = color;

        ctx.lineCap = 'round'; // butt, round or square

		ctx.lineWidth = lineWidth + 2

		ctx.stroke();

};



drawCircle2('red', options.lineWidth, options.percent / 100);

например можно вот это добавить, и получится как здесь - http://codepen.io/anzarsh/pen/VmoNro

Спасибо! С новым годом!

S
На сайте с 30.09.2016
Offline
469
Sitealert
#3

anzarsh, хоть убей - ничего не вижу.

Ага. В моём файерфоксе срабатывает, только если в окончание пути добавить "хоть чего-нибудь"

ctx.arc(0, 0, radius, Math.PI * 2 * percent, Math.PI * 2 * percent+1/1000, false);
Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий