Canvas 阴影效果 - Canvas 基础教程 - 简单教程，简单编程

Canvas 提供了四个属性用于设置阴影效果

属性	说明
shadowOffsetX	设置阴影在 X 延伸距离，不受变换矩阵所影响负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，默认 0
shadowOffsetY	设置阴影在 Y 轴的延伸距离，不受变换矩阵所影响负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，默认 0
shadowBlur	设置阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0
shadowColor	标准的 CSS 颜色值，用于设定阴影颜色效果，默认是全透明的黑色

当然了，这些阴影效果和 fillStyle 是一样的，一旦设置，后面绘制的图形都有阴影效果

范例

给文字绘制阴影效果

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="300" height="100">
</canvas>
<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");

ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(255, 0, 0, 0.5)";

ctx.font = "44px Times New Roman";

ctx.fillText("www.twle.cn",10,50);

</script>

运行结果如下