径向渐变

<!--1，创建径向渐变对象 createRadialGradient(x0,y0,r0,x1,y1,r1)，其中x0,y0,r0分别为起始圆的位置坐标和半径，x1,y1,r1为终止圆的坐标和半径。

2，设置渐变颜色 addColorStop(position,color)，position为从0.0~1.0之间的值，表示渐变的相对位置；color是一个有效的css颜色值。

3，设置画笔颜色为该径向渐变对象。

4，画图。-->

<canvas width="600" height="400" style="border:1px solid"></canvas>
<script>
    var myCanvas = document.querySelector("canvas");
    var cxt = myCanvas.getContext("2d");

    var radial = cxt.createRadialGradient(100,100,20,120,120,50);
    radial.addColorStop(0,'pink');
    radial.addColorStop(0.9,'hotpink');
    radial.addColorStop(1,'black');
    cxt.fillStyle = radial; //把渐变对象作为填充样式
    cxt.fillRect(0,0,500,500);

//fillRect(x,y,width,height)
//x:矩形左上角的X坐标
//y:矩形左上角的Y坐标
//width：矩形的宽度
//height: 矩形的高度 以像素计