上一节介绍了H5:画布Canvas基础知识讲解(二)之插入图像、像素级操作,接下来继续讲解H5:画布Canvas基础。 文字 虽然最近的WebKit版本和Firefox 3.1 nightly build才开始支持Text API,为了保证文章完整性我决定仍在这里介绍文字API。 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)坐标的相对位置。
可以把上面代码放置在文档head部分中,或者放在外部JavaScript文件中。 阴影 目前只有Konqueror和Firefox 3.1 nightly build支持Shadows API。API的属性为:shadowColor:阴影颜色。其值和CSS颜色值一致。 shadowBlur:设置阴影模糊程度。此值越大,阴影越模糊。其效果和Photoshop的高斯模糊滤镜相同。 shadowOffsetX和shadowOffsetY:阴影的x和y偏移量,单位是像素。
可以把上面代码放置在文档head部分中,或者放在外部JavaScript文件中。 颜色渐变 除了CSS颜色, fillStyle和strokeStyle属性可以设置为CanvasGradient对象。——通过CanvasGradient可以为线条和填充使用颜色渐变。 欲创建CanvasGradient对象,可以使用两个方法:createLinearGradient和createRadialGradient。前者创建线性颜色渐变,后者创建圆形颜色渐变。 创建颜色渐变对象后,可以使用对象的addColorStop方法添加颜色中间值。 下面的代码演示了颜色渐变使用方法:
可以把上面代码放置在文档head部分中,或者放在外部JavaScript文件中。 小结 Canvas是HTML5最让人期待的特性之一,目前已获得大部分Web浏览器支持Canvas可以帮助创建游戏、增强图形用户界面。2D context API提供大量图形绘制功能——我希望通过本文你了解了Canvas使用,并且你有兴趣了解更多! |
|
来自: zhulin1028 > 《待分类》