1、辐射渐变

  1. <style>
  2.     canvas {
  3.         width: 500px;
  4.         height: 300px;
  5.         border: 1px solid;
  6.     }
  7. </style>
  8. </head>
  9. <body>
  10. <canvas id="can" width="500px" height="300px"></canvas>
  11. <script>
  12.     var canvas = document.getElementById("can");
  13.     var ctx = canvas.getContext("2d");
  15.    ctx.beginPath();
  17.    var bg = ctx.createRadialGradient(100,100,0,100,100,100);//    参数：第一个点的坐标和半径，第二个点的坐标和半径:起始圆和结束圆
  18.  /*  var bg = ctx.createRadialGradient(50,50,20,100,100,100);//圆心不在同一个 */
  19.  /*  var bg = ctx.createRadialGradient(20,20,10,100,100,50);//起始圆小于结束圆并且相离 */
  20.    bg.addColorStop(0,"red");
  21.    bg.addColorStop(0.5,"green");
  22.    bg.addColorStop(1,"blue");
  23.    ctx.fillStyle = bg;
  24.    ctx.fillRect(0,0,200,200);
  25. </script>
  26. </body>

2、模糊光圈

  1. <style>
  2.     canvas {
  3.         width: 500px;
  4.         height: 300px;
  5.         border: 1px solid;
  6.     }
  7. </style>
  8. </head>
  9. <body>
  10. <canvas id="can" width="500px" height="300px"></canvas>
  11. <script>
  12.     var canvas = document.getElementById("can");
  13.     var ctx = canvas.getContext("2d");
  15.    ctx.beginPath();
  16.    //模糊光圈
  17.    var bg = ctx.createRadialGradient(100,100,30,100,100,100);
  18.    bg.addColorStop(0,"white");
  19.    bg.addColorStop(0.5,"black");
  20.    bg.addColorStop(1,"white");
  21.    ctx.fillStyle = bg;
  22.    ctx.fillRect(0,0,200,200);
  23. </script>
  24. </body>