bebraw
7/22/2010 - 12:13 PM

radial.htm

radial.htm
content_copyfile_download
<html>
    <head>
        <title>Radial Gradient Test</title>
        <script type="text/javascript">
            function draw(x, y) {
                var canvas = document.getElementById("canvas");
                var ctx = canvas.getContext("2d");

                var halfWidth = canvas.width / 2;
                var halfHeight = canvas.height / 2;

                var gradientCenterX = x != undefined? x: halfWidth;
                var gradientCenterY = y != undefined? y: halfHeight;

                // set up gradient
                var grad = ctx.createRadialGradient(
                    gradientCenterX, gradientCenterY, 0,
                    halfWidth, halfHeight, halfWidth);

                var stops = {0: 'black', 0.2: 'black',
                    0.25: '#33aaee', 0.45: '#0088ff', // blues
                    0.55: '#eeeeee', 0.8: '#bbbbbb', // whites
                    0.95: 'black', 1: 'black'
                };

                for (var position in stops) {
                    var color = stops[position];

                    grad.addColorStop(position, color);
                }

                // draw gradient
                ctx.fillStyle = grad;
                ctx.fillRect(0, 0, canvas.width, canvas.height);
            }

            function move(event) {
                draw(event.x - event.srcElement.offsetLeft,
                    event.y - event.srcElement.offsetTop);
            }
        </script>
    </head>
    <body onload="draw()">
    <canvas onmousemove="move(event)" id="canvas" width="300" height="300"></canvas>
</body>
</html>