程序设计HTML5 Canvas API

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位置去更新