Canvas 渐变特效-CFANZ编程社区

查看下代码

createRadialGradient() ：

创建一条放射颜色渐变。

参数：

xStart：开始圆的圆心的x坐标

yStart: 开始圆的圆心的Y坐标

radiusStart: 开始圆的半径

xEnd: 结束圆的圆心的x坐标

yEnd: 结束圆的圆心的Y坐标

radiusEnd : 结束圆的半径值

两圆相离的原理，会形成放射性的扇形，原理可以借助于三维场景图。

Canvas 渐变特效_2d

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <canvas id="canvas2" width="500" height="500"></canvas>
    <script>
      function draw2(){
        var c=document.getElementById("canvas2");
        var ctx=c.getContext("2d");
        //渐变
        var color=ctx.createRadialGradient(100,100,20,250,250,50);
        color.addColorStop(0,"red");
        color.addColorStop(0.5,"green");
        color.addColorStop(1,"yellow");

        ctx.beginPath();//开始绘制
        //开始绘制圆形;
        ctx.arc(150,150,200,0,2*Math.PI,false);
        ctx.fillStyle=color;
        ctx.stroke();
        ctx.fill();
      }
      window.addEventListener("load",draw2(),true)
    </script>
  </body>
</html>

大家可以自行设计第1个圆和第2个圆的，原点和半径的不同设置。

Canvas 渐变特效_html_02

Canvas 渐变特效_html_03