使用HTML绘制图形.ppt
- 文档编号:2644658
- 上传时间:2022-11-04
- 格式:PPT
- 页数:13
- 大小:187.50KB
使用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绘制商标
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 使用 HTML 绘制 图形
![提示](https://static.bdocx.com/images/bang_tan.gif)