HTML5 / Холст "Стекло" Круг

Question

Мне нужно визуализировать простую диаграмму, и я хочу, чтобы точки были гладкими, выглядящими кругами / сферами в области диаграммы.Я могу найти тонны примеров рисования их с помощью Photoshop, но я не хочу использовать стоковые изображения;Я бы предпочел нарисовать их на своем холсте HTML5.Я не художник, хотя!

Есть много вопросов по холсту HTML5, но я не вижу ничего, что привело бы меня к этому решению.

Точка в правильном направлении была бы наиболее ценной,

Answer 1

Все, что вам нужно сделать, это создать один или несколько радиальных градиентов, чтобы соответствовать свойствам нужного вам стеклянного объекта. Это легко сделать!

Всего один градиент:

// Create some gradient
var gradient = ctx.createRadialGradient(105, 105, 20, 120, 120, 50);
gradient.addColorStop(0, 'rgba(250,250,255,0)');
gradient.addColorStop(0.75, 'rgba(230,250,255,1.0)');
gradient.addColorStop(1, 'rgba(0,0,255,0)');

// draw the gradient (note that we dont bother drawing a circle, this is more efficient and less work!)
// but make sure it covers the entire gradient
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 300, 300);​

Можно сделать так:

Живой пример:

http://jsfiddle.net/GTbjk/

Может быть, вы хотите править этим нечетким краем:

gradient.addColorStop(0.8, 'rgba(0,0,255,0)');
gradient.addColorStop(1, 'rgba(0,0,255,0)');

http://jsfiddle.net/GTbjk/1/

Я не собираюсь делать его по вашей спецификации, так как вы его не предоставили, и это не то, для чего мы здесь в любом случае. Создание их будет почти исключительно делом правильных радиальных градиентов, так что идите на эксперимент!

Как указывает j08691, это действительно неэффективный способ сделать это, если вы не хотите, чтобы они были динамическими или масштабируемыми, вам лучше просто создавать изображения и использовать ctx.drawImage