文字
虽然最近的WebKit版本和Firefox 3.1 nightly build才开始支持Text API，为了保证文章完整性我决定仍在这里介绍文字API。
context对象可以设置以下text属性：
font：文字字体，同CSS font-family属性；
textAlign：文字水平对齐方式。可取属性值: start,end,left,right,center。默认值：start；
textBaseline：文字竖直对齐方式。可取属性值：top,hanging,middle,alphabetic,ideographic,bottom。默认值：alphabetic。
有两个方法可以绘制文字：fillText和strokeText。第一个绘制带fillStyle填充的文字，后者绘制只有 strokeStyle边框的文字。两者的参数相同：要绘制的文字和文字的位置(x,y)坐标。还有一个可选选项——最大宽度。如果需要的话，浏览器会缩 减文字以让它适应指定宽度。
文字对齐属性影响文字与设置的(x,y)坐标的相对位置。
ontext.fillStyle = '#00f'; context.font = 'italic 30px sans-serif'; context.textBaseline = 'top'; context.fillText ('Hello world!', 0, 0); context.font = 'bold 30px sans-serif'; context.strokeText('Hello world!', 0, 50); 复制代码
可以把上面代码放置在文档head部分中，或者放在外部JavaScript文件中。
阴影
目前只有Konqueror和Firefox 3.1 nightly build支持Shadows API。API的属性为：shadowColor：阴影颜色。其值和CSS颜色值一致。
shadowBlur：设置阴影模糊程度。此值越大，阴影越模糊。其效果和Photoshop的高斯模糊滤镜相同。
shadowOffsetX和shadowOffsetY：阴影的x和y偏移量，单位是像素。
context.shadowOffsetX = 5; context.shadowOffsetY = 5; context.shadowBlur = 4; context.shadowColor = 'rgba(255, 0, 0, 0.5)'; context.fillStyle = '#00f'; context.fillRect(20, 20, 150, 100); 复制代码
可以把上面代码放置在文档head部分中，或者放在外部JavaScript文件中。
颜色渐变
除了CSS颜色， fillStyle和strokeStyle属性可以设置为CanvasGradient对象。——通过CanvasGradient可以为线条和填充使用颜色渐变。
欲创建CanvasGradient对象，可以使用两个方法：createLinearGradient和createRadialGradient。前者创建线性颜色渐变，后者创建圆形颜色渐变。
创建颜色渐变对象后，可以使用对象的addColorStop方法添加颜色中间值。
下面的代码演示了颜色渐变使用方法：
var gradient1 = context.createLinearGradient(sx,sy,dx,dy); gradient1.addColorStop(0, '#f00'); gradient1.addColorStop(0.5, '#ff0'); gradient1.addColorStop(1, '#00f'); var gradient2 = context.createRadialGradient(sx,sy,sr,dx,dy, dr); 复制代码
可以把上面代码放置在文档head部分中，或者放在外部JavaScript文件中。
小结
Canvas是HTML5最让人期待的特性之一，目前已获得大部分Web浏览器支持Canvas可以帮助创建游戏、增强图形用户界面。2D context API提供大量图形绘制功能——我希望通过本文你了解了Canvas使用，并且你有兴趣了解更多！
作者：zhulin1028
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
