context.shadowOffsetX :阴影的横向位移量（默认值为0）
    context.shadowOffsetY :阴影的纵向位移量（默认值为0）
    context.shadowColor :阴影的颜色
    context.shadowBlur :阴影的模糊范围（值越大越模糊）

先来个简单的例子

 再来个书本上的五角星的例子

 

绘制图像 

绘图：context.drawImage

图像平铺：context.createPattern(image,type)

图像裁剪：context.clip()

像素处理：var imagedata=http://www.cnblogs.com/pingchuanxin/p/context.getImageData(sx,sy,sw,sh)

绘图 context.drawImage

    context.drawImage(image,x,y)

        image:Image对象var img=new Image(); img.src="http://www.cnblogs.com/pingchuanxin/p/url(...)";

        x:绘制图像的x坐标

        y:绘制图像的y坐标

    context.drawImage(image,x,y,w,h)

        image:Image对象var img=new Image(); img.src="http://www.cnblogs.com/pingchuanxin/p/url(...)";

        x:绘制图像的x坐标

        y:绘制图像的y坐标

        w:绘制图像的宽度

        h:绘制图像的高度

    context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh):选取图像的一部分矩形区域进行绘制

        image:Image对象var img=new Image(); img.src="http://www.cnblogs.com/pingchuanxin/p/url(...)";

        sx：图像上的x坐标

        sy：图像上的y坐标

        sw：矩形区域的宽度

        sh：矩形区域的高度

        dx：画在canvas的x坐标

        dy：画在canvas的y坐标

        dw：画出来的宽度

        dh：画出来的高度

    最后一个方法可能比较拗，还是上图吧

三个方法的运行结果如下：

图像平铺 context.createPattern(image,type)

    type:
        no-repeat:不平铺

        repeat-x:横方向平铺

        repeat-y:纵方向平铺

        repeat:全方向平铺

类似图形组合，给出动态的切换平铺类型代码

图像裁剪：context.clip()

    context.clip()只绘制封闭路径区域内的图像，不绘制路径外部图像，用的时候

        先创建裁剪区域

        再绘制图像（之后绘制的图形都会采用这个裁剪区域，要取消这个裁剪区域就需要用到保存恢复状态，下面有讲）

 给出圆形和星形的裁剪代码

像素处理：

获取像素颜色数组： var imagedata=http://www.cnblogs.com/pingchuanxin/p/context.getImageData(sx,sy,sw,sh)

    sx:cavas的x轴坐标点

    sy:canvas的y轴坐标点

    sw:距离x的宽度

    sh:距离y的高度

可以利用context.getImageData返回的一个像素颜色数组，顺序是所取像素范围的从左到右，从上到下，数组的元素是（所有图形，包括图片，和绘制的图形）每个像素的rgba

[r1,g1,b1,a1,r2,g2,b2,a2...]