// 可以创建一棵用作阴影的倾斜的树
// 应用了变换以后，所有坐标都与矩阵相乘
context.transform(1, 0,
-0.5, 1,
, 0);</p>
<p>// 在Y轴方向，将阴影高度变为原来的60%
context.scale(1, 0.6);</p>
<p>// 使用透明度为20%的黑色填充树干
context.fillStyle = ‘rgba(0, 0, 0, 0.2)’;
context.fillRect(-5, -50, 10, 50);</p>
<p>// 使用已有的阴影效果重新绘制树
createCanopyPath(context);
context.fill();</p>
<p>// 恢复之前的canvas状态
context.restore();
文本
context.fillText(text,x,y,maxwidth):text文本内容，x,y指定文本位置,maxwidth是可选参数，限制文本位置。
context.strokeText(text,x,y,maxwidth):text文本内容，x,y指定文本位置,maxwidth是可选参数，限制文本位置。
复制代码
// 在canvas上绘制文本
context.save();</p>
<p>// 字号为60,字体为Impact
context.font = “60px impact”;</p>
<p>//填充颜色
context.fillStyle = ‘#996600’;
//居中
context.textAlign = ‘center’;</p>
<p>//绘制文本
context.fillText(‘Happy Trails!’, 200, 60, 400);
context.restore();
阴影
可以通过几种全局context属性来控制阴影
| 属性 | 值 | 备注 |
| shadowColor | 任何CSS中的颜色值 | 可以使用透明度（alpha） |
| shadowOffsetX | 像素值 | 值为正数，向右移动阴影;为负数，向左移动阴影 |
| shadowOffsetY | 像素值 | 值为正数，向下移动阴影;为负数，向上移动阴影 |
| shadowBlur | 高斯模糊值 | 值越大，阴影边缘越模糊 |
复制代码
// 颜色黑色，20%透明度
context.shadowColor = ‘rgba(0, 0, 0, 0.2)’;</p>
<p>// 向右移动15px,向左移动10px
context.shadowOffsetX = 15;
context.shadowOffsetY = -10;</p>
<p>// 轻微模糊阴影
context.shadowBlur = 2;
像素数据
context.getImageData(sx, sy, sw, sh)：sx,xy确定一个点，sw:宽度，sh:高度。
这个函数返回三个属性：width 每行有多少个像素 height 每列有多少个像素
data 一堆数组，存有从canvas获取的每个像素的RGBA值（值红、绿、蓝和透明度）。
context.putImageData(imagedata,dx,dy)：允许开发人员传入一组图像数据，dx,dy用来指定偏移量，如果使用，则该函数就会跳到指定的canvas位置去更新
显示传进来的像素数据。
