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