canvas阴影

代码：

 1 /**
 2  * Created by Administrator on 2016/2/1.
 3  */
 4 function draw (id){
 5     var canvas = document.getElementById(id);
 6     var context = canvas.getContext('2d');
 7     //阴影效果
 8     context.shadowColor = "#FA8072";
 9     context.shadowOffsetX = -5;
10     context.shadowOffsetY = 5;
11     context.shadowBlur = 5;
12     //文本
13     context.fillStyle = "#E3170D";
14     context.globalAlpha = 0.8;
15     context.font = "bold 36px impact";
16     context.fillText("Hello World" ,10,50);
17 }

View Code

用到的方法有：

　　shadowColor();shadowOffsetX();shaowOffsetY();shadowBure()。

　　说明：

　　　　shadowColor(): 设置阴影颜色。可以为半透明颜色。

　　　　shadowBure():高斯模糊，就是PS那个。值越大，边缘越模糊。

妙点：阴影属性不仅可以应用到任何绘制的图像中，还可以应用到图片中。

插播一个方法：measureText(),可用于获取文本的宽度。

　　用法示例：

　　　　　　　　var txt = "Hello Word";

　　　　　　　　var tm = context.measureText(txt);

　　　　　　　　congtext.fillText(tm.width,tm.width,50);