51工具盒子我们可以在HTML5 canvas上绘制出图形或文字的阴影效果。canvas的阴影效果非常简单，通过一些简单的设置，就可以自动在图片或文字下面生成相应的阴影。下面是一个简单的例子：
你的浏览器不支持HTML5 Canvas！
在canvas中，图形的阴影由2D上下文的4个属性来控制：
-
shadowOffsetX
-
shadowOffsetY
-
shadowBlur
-
shadowColor
shadowOffsetX和shadowOffsetY属性阴影和图形之间的距离。正数值表示阴影绘制在图形的右边（X轴方向），或图形的下方（Y轴方向）。而负数值表示阴影绘制在图形的左边（X轴方向），或图形的上方（Y轴方向）。它们的默认值都是0。
shadowBlur属性用于设置阴影的模糊效果。数值越大，阴影越模糊。数值越小，用于越清晰。它的值是一个浮点数，0表示阴影不模糊。
shadowColor表示阴影的颜色。
上面例子的实现代码如下：
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 4;
context.shadowColor = "#666666"; //or use rgb(red, green, blue)
context.fillStyle = "#000000";
context.fillRect(10,10, 50, 50);
context.fillStyle = "#000066";
context.font = "30px Arial";
context.fillText("HTML5 Canvas Shadow", 10,120);
填充模式
填充模式是指在canvas中使用某张图片作为一种模式来填充图形。我们可以通过createPattern()方法来创建一种填充模式。它的语法为：createPattern(image, type)。
参数image可以是一个HTML图片元素，另一个canvas或一个<video>元素等。
参数type表示如何使用图片来创建特定的模式。它的取值可以是：
-
repeat：在水平和垂直方向上重复图片。 -
repeat-x：只在水平方向上重复图片。 -
repeat-y：只在垂直方向上重复图片。 -
no-repeat：不重复图片，只显示一次。
下面是一个使用填充模式的简单例子：
var ctx = document.getElementById('canvas').getContext('2d');
// create new image object to use as pattern
var img = new Image();
img.src = 'Canvas_createpattern.png';
img.onload = function(){
// create pattern
var ptrn = ctx.createPattern(img,'repeat');
ctx.fillStyle = ptrn;
ctx.fillRect(0,0,150,150)
我们在模式中使用的图片如下：
上面代码的返回结果如下： 你的浏览器不支持HTML5 Canvas！
