【canvas】设置阴影(了解，少用，性能差)

shadowColor:设置或返回用于阴影的颜色

shadowBlur：设置或返回用于阴影的模糊级别，大于1的正整数,数值越高,模糊程度越大

shadowOffsetX:设置或返回阴影矩形状的水平距离

shadowOffsetY:设置或返回阴影矩形状的垂直距离

ctx.fillStyle="rgba(255,0,0,.9)"
ctx.shadowColor="teal";
ctx.shadowBlur=10;
ctx.shadowOffsetX=10;
ctx.shadowOffsetY=10;
ctx.fillrect(100,100,100,100)

代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <canvas width="600"  height="300" >
        
    </canvas>
</body>
    <script type="text/javascript">
    var canvas=document.querySelector("canvas");
    canvas.style.border="solid 1px #000";
    var c=canvas.getContext('2d');
    c.fillStyle="rgba(255,0,0,.6)";
    c.shadowColor="rgba(255,0,0,.6)"
    c.shadowBlur=10;
    c.shadowOffsetX=10;
    c.shadowOffsetY=10;
    c.fillRect(0,0,100,100);
    c.fill();


    </script>
</html>

示例结果:

 

posted @ 2017-08-14 10:06  丰study  阅读(881)  评论(0)    收藏  举报