通过代码示例跟我学html5相关技术——html5中的canvas标签及应用实例第2部分

通过代码示例跟我学html5相关技术——html5中的canvas标签及应用实例第2部分内容摘要：

|| fontsize || fontfamily =12px sansserif。 fillStyle fillStyle 代表的是填充的颜色，为 fillText()函数提供填充的颜色 strokeStyle strokeStyle 代表的是线条的颜色，为 strokeText()函数提供文字的颜色 textAlign 文字水平对齐方式，取值可以为 start、 end、 left、right、 center 默认 start textBaseline 文字竖直对齐方式，取值可以为 top、 hanging、middle、 alphabetic、 ideographic、 bottom 默认 alphabetic 在 Canvas 对象所在的区域中绘制文本 （ 1）示例代码 !DOCTYPE HTML html head meta equiv=ContentType content=text/html。 charset=gb18030 titleHTML5 的 2D Canvas 示例页面 /title script type=text/javascript language= = function() { var canvas = (39。 my_canvas39。 )。 if() { var context = (2d)。 ()。 //字号为 60px，字体为 Times New Roman，浏览器所支持的字体 = 39。 60px Times New Roman39。 = 39。 99660039。 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 杨教授工作室，版权所有，盗版必究 ， 12/25 页 12 = 39。 center39。 (39。 在 Canvas 中绘制文本 39。 ,200,60,400)。 } else { (39。 my_canvas39。 ). = 39。 none39。 (39。 nocanvas39。 ). = 39。 block39。 } }。 /script /head body section header h12D Canvas 示例 /h1 /header p canvas id=my_canvas width=600 height=500/canvas div id=nocanvas style=display:none你的浏览器不支持 2D Canvas 相关的技术 /div /p /section /body /html （ 2）执行的结果 在 Canvas 对象 所在的区域中绘制文本 （ 1）示例 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 杨教授工作室，版权所有，盗版必究 ， 13/25 页 13 !DOCTYPE HTML html head meta equiv=ContentType content=text/html。 charset=gb18030 titleHTML5 的 2D Canvas 文字示例页面 /title script type=text/javascript language= = function() { var canvas = (39。 my_canvas39。 )。 if() { var context = (2d)。 = 39。 00f39。 = 39。 italic 30px sansserif39。 = 39。 top39。 //填充字符串 (39。 HTML5 的 2D Canvas 文字示例 39。 , 0, 0)。 =39。 bold 30px sansserif39。 //轮廓字符串 (39。 HTML5 的 2D Canvas 文字示例 39。 , 0, 50)。 } else { (39。 my_canvas39。 ). = 39。 none39。 (39。 nocanvas39。 ). = 39。 block39。 } }。 /script /head body section header h1HTML5 的 2D Canvas 文字示例 /h1 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 杨教授工作室，版权所有，盗版必究 ， 14/25 页 14 /header p canvas id=my_canvas width=600 height=500/canvas div id=nocanvas style=display:none你的浏览器不支持 2D Canvas 相关的技术 /div /p /section /body /html （ 2）执行后的结果 在 Canvas 中绘制阴影文本 （立体字） （ 1）相关的属性 可以使用内置的 Canvas Shadow API 为文字添加阴影模糊效果。 属性 值 备注 shadowColor 阴影的颜色 值 可以使用透明度 shadowOffsetX 横向位移量 像素值 ，设置为 10表明阴影会出现在原图形右边，最多 10 像素 X方向便宜 shadowOffsetY 纵向位移量 像素值 ，设置为 10表明阴影会出现在原图形下边，最多 10 像素 shadowBlur 高斯模糊值 （ 2）代码示例 !DOCTYPE HTML html head meta equiv=ContentType content=text/html。 charset=gb18030 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 杨教授工作室，版权所有，盗版必究 ， 15/25 页 15 titleHTML5 的 2D Canvas 示例页面 /title script type=text/javascript language= = function() { var canvas = (39。 my_canvas39。 )。 if() { var context = (2d)。 = 39。 60px Times New Roman39。 = 39。 99660039。 = 39。 center39。 = rgba(0,0,0,)。 = 10。 = 10。 = 2。 (在 Canvas 中绘制 3D 文本字符串 ,100, 150)。 } else { (39。 my_canvas39。 ). = 39。 none39。 (39。 nocanvas39。 ). = 39。 block39。 } }。 /script /head body section header h12D Canvas 示例 /h1 /header。