(六)阴影

shadowColor = "rgba(0,0,0,0.5)" 【设置阴影的颜色】
shadowOffsetX = 5 【px,设置阴影x轴的偏移量】
shadowOffsetY = 5 【设置阴影y轴的偏移量】
shadowBlur = 5 【设置阴影的模糊程度】

var canvas = document.getElementById("canvas");
    if(canvas.getContext){
        var ctx = canvas.getContext("2d");
        ctx.beginPath();


        ctx.fillStyle = "red";//填充颜色
        ctx.shadowColor = "grey";//阴影颜色
        ctx.shadowOffsetX = 10;//x轴偏移量 px
        ctx.shadowOffsetY = 10;//y轴偏移量
        ctx.shadowBlur = 5;//阴影的模糊程度
        ctx.save();//保存以上设置 一级

        ctx.fillStyle = "green";
        ctx.shadowColor = "rgba(0,0,0,.4)";
        ctx.shadowOffsetX = 10;
        ctx.shadowOffsetY = 10;
        ctx.shadowBlur = 8;
        ctx.save();//保存以上设置 二级

        ctx.restore();//恢复 二级 设置
        ctx.fillRect(50,50,100,50);

        ctx.restore();//恢复 一级 设置
        ctx.fillRect(100,80,100,50);

        ctx.stroke();
        ctx.closePath();
    }
原文地址:https://www.cnblogs.com/chefweb/p/6046477.html