绘制图像

管理员01  发布于:2014-11-23  浏览:

摘要:与在画布上绘制图形类似,画布也提供了功能强大的绘制图像的API函数,可以:加载图像数据并显示到画布上。为了将一幅图像绘制到画布上,可以使用drawlmage:来实现,该方法具有3种可选的变体方法,用来把图像显示到画布上,分别如下所示: drawlmage需要至少一个image对象,这个对象是指页面上放置的img元素中的图像,x和y用来指定要放置的目标坐标点,width和height用来调整原始图像的大小到目标的宽度和高度,这个选项类似于img元素的size属性。 新建一个名为HTML5Dem014.html的网页,在该网页上放一个canvas元素,下面的代码将演示如何使用drawlmage的前面两种方法在画布上绘制图像,如代码11.18所示: 代码核心部分的描述如下所示。 (1)在代码中定义了x、y、width和height变量,用来定义drawlmage将要绘制的图像对象的坐标位置和图像大小。 (2)在代码中实例化
  与在画布上绘制图形类似,画布也提供了功能强大的绘制图像的API函数,可以:加载图像数据并显示到画布上。为了将一幅图像绘制到画布上,可以使用drawlmage:来实现,该方法具有3种可选的变体方法,用来把图像显示到画布上,分别如下所示:


  drawlmage需要至少一个image对象,这个对象是指页面上放置的<img>元素中的图像,x和y用来指定要放置的目标坐标点,width和height用来调整原始图像的大小到目标的宽度和高度,这个选项类似于img元素的size属性。
  新建一个名为HTML5Dem014.html的网页,在该网页上放一个canvas元素,下面的代码将演示如何使用drawlmage的前面两种方法在画布上绘制图像,如代码11.18所示:

  代码核心部分的描述如下所示。
  (1)在代码中定义了x、y、width和height变量,用来定义drawlmage将要绘制的图像对象的坐标位置和图像大小。
  (2)在代码中实例化了一个新的Image对象,该对象的src属性指定了一幅图片,由于Image对象并未添加到DOM文档树,因此并不会在网页上显示。
  (3)代码首先调用了drawlmage方法,用来在x和y各为10的坐标位置上绘制imageObj对象,这将会以图像的原始大小对图像进行绘制。
  (4)代码再次调用drawlmage方法,但是这次指定了width和height属性,这将会在指定的位置使用指定的宽度和高度对图像进行缩放绘制。
  示例运行效果如图11.26所示。

  以图11.26中可以看到,第一幅图的大小保持了原始的比例,而第二幅图明显进行了缩放,图片有点变形,因为在调用drawlmage时使用了指定的宽度和高度进行了缩放。
  本章介绍了HTML的最新版本HTML 5的基础知识,首先讨论了HTML 5的作用和新的特性,并介绍了HTML 5与HTML 4的区别,同时讨论了如何使用Dreamweaver的最新版本创建HTML 5网页。在HTML 5元素介绍部分,讨论了新的DOCTYPE和字符集设置,HTML 5与HTML 4相比较有哪些新增和移除的标签,同时介绍了HTML 5中新增加的语义性元素和HTML 5的全局属性,最后讨论了HTML 5的交互性元素。HTML 5最重要的新特性是新增的画布支持,在本章详细讨论了Canvas对象的使用方法,讨论了如何通过JavaScript语言在画布上绘制矩形、圆形、线条及图像等特性。

文章链接:http://www.jihai.com/a/jiaocheng/html5-css3/201411/881.html
标签:绘制(10)类似(5)图像(37)图形(4)上(10)画布(7)也(3)与(43)在(109)
作者:管理员01 来源:未知 发布于2014-11-23 17:06
您可能喜欢的文章

热门模板
热门阅读
热门插件