本文介绍 canvas shadow api ， 为文本添加模糊阴影效果. 虽然之前已对 canvas 阴影效果应用 有介绍 , 这里主要介绍对文本的阴影效果.
阴影效果的使用也要把握好 度.
看一个示例
<!doctype html>
<html>
<meta charset="utf-8">
<title>文本阴影示例</title>
<canvas id="trails" style="border: 1px solid;" width="400" height="300"> </canvas>
<script>
drawtrails();
function drawtrails() {
var canvas = document.getelementbyid('trails');
var context = canvas.getcontext('2d');
context.save();
context.font = "60px impact";
context.fillstyle = '#996600'
context.textalign = 'center';
// 设置文字阴影的颜色为黑色，透明度为20%
context.shadowcolor = 'rgba(0, 0, 0, 0.2)';
// 将阴影向右移动15px, 向上移动10px
context.shadowoffsetx = 15;
context.shadowoffsety = -10;
// 轻微模糊阴影
context.shadowblur = 2;
context.filltext('happy trails!', 200, 60, 400);
context.restore();
}
</script>
</html>
运行效果图
以上是由css样式生成的阴影，它只有位置上的变化，而无法与之前介绍的变换生成的阴影(树影)保持同步.
为了一致起见， 在canvas 上绘制阴影时，应该尽量只用一种方法
以上就是html5之9 __canvas 的shadow api 的内容。