Radial Gradients in SVG and Canvas

注：radial gradient 中的 color-stop 与linear gradient中的color-stop类似，在这里不予说明。

Radial Gradient in SVG

1. The radial gradient is defined by two points: center point and focal point.
2. Center point describes a circle around which the gradient ends（即渐变结束的位置）. It is defined by the cx and cy attributes, and a radius, r. (cx and cy together makes the position of the center point)
3. Focal point describes where gradient’s middle is（即渐变中心的位置）. It is defined by the fx and fy attributes, and a radius, fr.

Radial Gradient in Canvas

1. Canvas creates a radial gradient using the size and coordinates of
   two circles, one start the radial, and the other ends it.
2. Radial Gradient in Canvasis specified by six parameters, three
   defining the gradient’s start circle, and three defining the end
   circle.
   The six parameters are as follows:
   – x0: The x-axis coordinate of the start circle.
   – y0: The y-axis coordinate of the start circle.
   – r0: The radius of the start circle. Must be non-negative and finite.
   – x1: The x-axis coordinate of the end circle.
   – y1: The y-axis coordinate of the end circle.
   – r1: The radius of the end circle. Must be non-negative and finite.

参考资料

SVG Gradient–MDN
Canvas Gradient
Radial Gradient