使用HTML绘制图形.ppt

使用HTML绘制图形.ppt

《使用HTML绘制图形.ppt》由会员分享，可在线阅读，更多相关《使用HTML绘制图形.ppt（13页珍藏版）》请在冰豆网上搜索。

第8章使用HTML5绘制图形本章内容o8.1什么是canvaso8.2绘制基本形状o8.3绘制渐变图形o8.4绘制变形图形o8.5绘制其他样式的图形o8.6使用图像o8.8图形的保存与恢复o8.8综合实例绘制火柴棒人物o8.9绘制商标8.1什么是canvascanvas是一个新的HTML元素，这个元素可以被Script语言（通常是JavaScript）用来绘制图形。

例如可以用它来画图、合成图像、或做简单的动画。

8.2绘制基本形状o8.2.1绘制矩形o8.2.1绘制圆形o8.2.2使用moveTo与lineTo绘制直线o8.2.3使用bezierCurveTo绘制贝济埃曲线8.3绘制渐变图形o8.3.1绘制线性渐变o8.3.2绘制径向渐变8.4绘制变形图形o8.4.1变换原点坐标o8.4.2图形缩放o8.4.3旋转图形8.5.1绘制其他样式的图形o在介绍前面知识里面，可以将一个图形画在另一个之上，大多数情况下，这样是不够的。

例如说，它这样受制于图形的绘制顺序。

不过，我们可以利用globalCompositeOperation属性来改变这些做法。

不仅可以在已有图形后面再画新图形，还可以用来遮盖，清除（比clearRect方法强劲得多）某些区域。

o其语法格式如下所示。

oglobalCompositeOperation=type8.5.2绘制带阴影的图形o在画布canvas上绘制带有阴影效果的图形非常简单，只需要设置几个属性即可。

这几个属性分别为shadowOffsetX、shadowOffsetY、shadowBlur和shadowColor，其属性shadowColor表示阴影颜色，其值和CSS颜色值一致。

shadowBlur表示设置阴影模糊程度。

此值越大，阴影越模糊。

shadowOffsetX和shadowOffsetY属性表示阴影的x和y偏移量，单位是像素。

8.5.3绘制文字o在画布中绘制字符串（文字）的方式，操作其他路径对象的方式相同，可以描绘文本轮廓和填充文本内部，同时，所有能够应用于其他图形的变换和样式都能用于文本。

8.6使用图像o8.6.1绘制图像o8.6.2图像平铺o8.6.3图像裁剪o8.6.4像素处理8.7图形的保存与恢复o8.7.1保存与恢复状态o8.7.2保存文件o8.7.3绘制图形综合应用8.8综合案例1绘制火柴棒人物o漫画中最常见的一种图形，就是火柴棒人，通过简单的几个笔画，就可以绘制一个传神的动漫人物。

使用canvas和JavaScript同样可以绘制一个火柴棒人物。

8.9综合案例2绘制商标