HTML5 Canvas createradialgradient () radial/circular gradient

Definition and usage

The Createlineargradient () method creates a radial/circular gradient object.

Gradients can be used to fill rectangles, circles, lines, text, and so on.

Tip: Use this object as the value of the Strokestyle or FillStyle property.

Tip: Use the Addcolorstop () method to specify a different color and where to position the color in the gradient object.

Principle

JavaScript Syntax:

Context.createradialgradient (X0,Y0,R0,X1,Y1,R1);

Parameter values

Parameters	Description
X0	The x-coordinate of the beginning circle of the gradient
Y0	The y-coordinate of the start circle of the gradient
R0	The radius of the start circle
X1	The x-coordinate of the end circle of the gradient
Y1	The y-coordinate of the end circle of the gradient
R1	End radius of Circle

Instance:

<CanvasID= "CANVAS1"width= "$"Height= "$"style= "border:1px solid blue;"></Canvas><Script>    varCanvas=document.getElementById ('CANVAS1'); varCTX=Canvas.getcontext ('2d'); varGRD=Ctx.createradialgradient ( -,  -, 5,  -,  -,  -); Grd.addcolorstop (0, 'Red'); Grd.addcolorstop (1, ' White'); //using the warp gradientCtx.fillstyle=GRD; Ctx.fillrect (0, 0, Canvas.width, canvas.height);</Script>

Browser support

Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the Createradialgradient () method.

Note: Internet Explorer 8 or earlier browsers do not support the <canvas> element.

Principle Schematic Description:

    <CanvasID= "CANVAS1"width= "The "Height= "The "style= "border:1px solid blue;"></Canvas>    <Script>        varCanvas=document.getElementById ('CANVAS1'); varCTX=Canvas.getcontext ('2d'); //when the cycle1 is inside the cycle2, and the center is coincident        varCycle1={x: $, y: $, R: -        }; varCycle2={x: $, y: $, R: the        };        Ctx.beginpath (); Ctx.arc (cycle1.x, Cycle1.y, CYCLE1.R,0, Math.PI* 2, false);        Ctx.stroke ();        Ctx.beginpath (); Ctx.arc (cycle2.x, Cycle2.y, CYCLE2.R,0, Math.PI* 2, false);        Ctx.stroke (); //using the warp gradient        varGRD=ctx.createradialgradient (cycle1.x, Cycle1.y, CYCLE1.R, cycle2.x, Cycle2.y, CYCLE2.R); Grd.addcolorstop (0, 'Rgba (255,0,0,0.75)'); Grd.addcolorstop (0.5, 'Rgba (0,255,0,0.75)'); Grd.addcolorstop (1, 'Rgba (0,0,255,0.75)'); Ctx.fillstyle=GRD; Ctx.fillrect (0, 0,  -,  -); </Script>

One, two circle size is not equal case

1. When the cycle1 is inside the cycle2, and the center is coincident

2. When the cycle1 is inside the Cycle2, the center is not coincident

3. When the cycle2 is inside the Cycle1, the center is not coincident

4. When Cycle1 and Cycle2 are absent, and the size is not the same

Two, two circle size equal case

1. When Cycle1 and Cycle2 are absent, and the same size

2. When Cycle1 and Cycle2 intersect, and the same size

3. When Cycle1 and Cycle2 intersect, the center is the same and the same size

HTML5 Canvas createradialgradient () radial/circular gradient