Returns an object that represents a radial or circular gradient to use in a canvas context.
.png){kind=icon}
.png){kind=icon} |
Syntax
var retval = CanvasRenderingContext2D.createRadialGradient(x0, y0, r0, x1, y1, r1);Parameters
- x0 [in]
-
Type: Floating-point
The x-coordinate of the starting circle of the gradient.
- y0 [in]
-
Type: Floating-point
The y-coordinate of the starting circle of the gradient.
- r0 [in]
-
Type: Floating-point
The radius of the starting circle.
- x1 [in]
-
Type: Floating-point
The x-coordinate of the ending circle of the gradient.
- y1 [in]
-
Type: Floating-point
The y-coordinate of the ending circle of the gradient.
- r1 [in]
-
Type: Floating-point
The radius of the ending circle.
Return value
Type: ICanvasGradient
A CanvasGradient object that represents the radial gradient.
Standards information
- HTML Canvas 2D Context, Section 5
Remarks
You can use radial gradients together with the fillText or fillRect method. The following illustration uses fillRect.
.jpg)
Examples
The following code example creates a rainbow-colored radial gradient. By using a mouse event, you can move it around the screen.
<html>
<head>
<title>Canvas Radial Gradient test </title>
<style>
canvas
{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
</style>
<script>
function draw() {
var canvas = document.getElementsByTagName('canvas')[0];
body = document.getElementsByTagName('body')[0];
if (canvas.getContext('2d')) {
// Create the initial canvas and start the gradient.
ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 600, 600);
gradient = ctx.createRadialGradient(300, 300, 0, 300, 300, 300);
ctx.fillStyle = getColors(gradient);
ctx.fillRect(0, 0, 600, 600);
body.onmousemove = function (event) {
var width = window.innerWidth,
height = window.innerHeight,
x = event.clientX,
y = event.clientY,
rx = 600 * x / width,
ry = 600 * y / height;
gradient = ctx.createRadialGradient(rx, ry, 0, rx, ry, 300);
ctx.fillStyle = getColors(gradient); // Use the gradient for the fill style.
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 600, 600);
};
}
}
function getColors(gradient) // Get the colors. Because they are used twice, get them when they are needed.
{
gradient.addColorStop("0", "magenta");
gradient.addColorStop(".25", "blue");
gradient.addColorStop(".50", "green");
gradient.addColorStop(".75", "yellow");
gradient.addColorStop("1.0", "red");
return (gradient);
}
</script>
</head>
<body onload="draw();">
<canvas height="600" width="600">This browser or document mode doesn't support canvas</canvas>
</body>
</html>
See also
Send comments about this topic to Microsoft
Build date: 11/28/2012
