<!DOCTYPE HTML>
<html>
<head>
<title>shadows</title>
<script type="text/javascript">
function draw() {
var cxt = document.getElementById("myCanvas").getContext("2d");
cxt.shadowOffsetX=2;
cxt.shadowOffsetY=2;
cxt.shadowBlur=2;
cxt.shadowColor="rgba(0,0,0,0.5)";
cxt.font="20px 微软雅黑";
cxt.fillStyle="Black";
cxt.fillText("阴影效果",5,30);
}
</script>
</head>
<body onLoad="draw()">
<canvas id="myCanvas" width="150" height="140" style="border:2px solid #06f;"></canvas>
</body>
</html>
显示效果如下：
【shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，他们默认都是 0。shadowBlur 用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0。shadowColor 用于设定阴影效果的延伸，值可以是标准的 CSS 颜色值，默认是全透明的黑色。】