canvas的渐变效果

线性渐变

<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    //实现渐变效果
    //1.获取渐变对象
    //后面的参数有两种功能，设置渐变的方向，设置渐变的范围
    var grd = context.createLinearGradient(200,100,200,400);
    //2.设置渐变的颜色
    /*
        参数1：指定颜色的位置，取值范围0-1，相对于渐变范围
        参数2：颜色
    */
    grd.addColorStop(0,"red");
    grd.addColorStop(0.5,"yellow");
    grd.addColorStop(1,"orange");
    //3.将渐变对象赋值给填充颜色
    context.fillStyle = grd;
    //4.画图
    context.fillRect(0,0,canvas.height,canvas.width);
</script>

径向渐变

 <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        //1.创建扇形渐变对象
        /*
            前三个参数是一个开始圆，后三个参数构成一个结束圆
            两个圆确定渐变的方向和范围
        */
        var grd = context.createRadialGradient(50,50,50,30,80,100);
        //2.设置渐变颜色
        grd.addColorStop(0,"red");
        grd.addColorStop(0.5,"yellow");
        grd.addColorStop(1,"pink");
        //3.将渐变对象作为填充颜色
        context.fillStyle = grd;
        //4.绘制
        context.fillRect(0,0,350,350);
 </script>