Question

Recently I got a task that is to draw circles on my own website with Google Maps API.
The complexity is the center of the circle is representing a “signal transmitter” and I need to make the circle transparent, with the opacity of each pixel reprseting the signal intensity of the exact location.

My basic idea is to extend the “Overlay” of Google Map API, so I have to write it in javascript I think.

The key part is to draw a circle with gradually changing opacity (inner stronger, outter lighter) and idealy, I can specify the opacity of each pixel.

I’ve been looking for approaches like CSS3, SVG, VML and even jquery and AJAX but still having no idea about how to archve this.

Thank you very much for your helping!

Answer 1

Here I got the solution. It’s making use of the Canvas element of HTML5 (which is widely supported).

Here is the javascript code for locating the canvas element and draw the circle with gradually changing transparency. The key part is to use the “Gradient”.

//get a reference to the canvas
var ctx = $('#canvas')[0].getContext("2d");


//draw a circle
gradient = ctx.createRadialGradient(200, 200, 0, 200, 200, 200);
gradient.addColorStop("0", "blue");
gradient.addColorStop("1.0", "transparent");
ctx.fillStyle = gradient;

//ctx.beginPath();
ctx.arc(200, 200, 200, 0, Math.PI*2, true); 
//ctx.closePath();
ctx.fill();