第15章图形图像编程.pptVIP

第五篇 ASP.NET 高级编程 东鹏电子信息有限公司 内容 第 15 章 图形图像编程 第 16 章 ASP.NET 和 AJAX 第 17 章 ASP.NET MVC 基础 第 15 章 图形图像编程 主讲：Jayce_Zou 本章内容 主讲：Jayce_Zou 图形编程 绘制文字特效 绘制图片 图像特效处理 图像布局  主讲：Jayce_Zou 在页面布局中，很多设计人员喜欢使用 CSS 设计，这样能够简化页面代码，将页面布局代码和页面代码相分离，从而提高了维护性。 虽然随着技术的发展，越来越多的动态生成页面布局，以及动态生成图像的方法也越来越多的被开发人员和设计人员所认知，但是开发人员和设计人员还是比较喜欢使用 CSS 和 IMG 标签进行页面布局，这是因为 CSS 和 IMG 标签都比较简单，可以说是“轻量级”的，即不需要页面进行逻辑处理也不需要动态生成。 IMG 标签  主讲：Jayce_Zou IMG 标签是图像标签，IMG 标签属于 HTML 控件，在 Web 应用中可以看到在页面中包含大量的 IMG标签用于图形图像显示，示例代码如下所示: body img src=autom.jpg / /body 使用 IMG 标签能够轻松的为网页添加图片，IMG 标签包括以下常用属性： Src：图片的地址，可以是图片的相对地址也可以是绝对地址。 Width：设定图片的宽度。 Height：设定图片的高度。 Alt：当图片显示不了时提示的字符。 Border：图片的边框的宽度。 Align：图片的周片文字的对齐方式。 Title：当鼠标放在图片上出现的提示字符。 CSS  主讲：Jayce_Zou 通过 CSS 能够使用图像进行页面布局和样式控制。当需要使背景呈现渐变效果时，无需使用 JavaScript进行控制，可以直接使用 CSS 和图像进行搭配使用即可。CSS 背景属性包括： 背景颜色属性（background-color）：该属性为 HTML 元素设定背景颜色。 背景图片属性（background-image）：该属性为 HTML 元素设定背景图片。 背景重复属性（background-repeat）：该属性和 background-image 属性连在一起使用，决定背景图片是否重复。如果只设置 background-image 属性，没设置 background-repeat 属性，在缺省状态下，图片既 x 轴重复，又 y 轴重复。 背景附着属性（background-attachment）：该属性和 background-image 属性连在一起使用，决定图 片是跟随内容滚动，还是固定不动。 背景位置属性（background-position）：该属性和 background-image 属性连在一起使用，决定了背景图片的最初位置。 背景属性（background）：该属性是设置背景相关属性的一种快捷的综合写法。 JavaScript 进行图像编程  主讲：Jayce_Zou HTML 图像控件支持 JavaScript 进行图像操作，可以为图像控件进行事件处理，JavaScript 代码如下所示: script type=text/javascript function cut(){ //获取 ID 为 pic1 的图片的属性 var pic=document.getElementById(“pic1”) pic.width=100; //设置图片的宽度 pic.height=100; //设置图片的高度 } /script 上述代码获取图片ID 为pic1 的图片属性，当触发该事件后，ID 为 pic1 的图片的宽度和高度将变为 100。 为了让图片被单击时触发该事件，则应该在 IMG 标签中声明该事件，代码如下所示: img alt= height=323 src=autom.jpg width=500“ onclick=cut() id=pic1/ GDI+简介  主讲：Jayce_Zou 虽然通过 IMG 标签和 CSS、JavaScript 相配