Html5中图像的绘制与操作.pdfVIP

Html5中图像的绘制与操作

canvas更有意思的一项特性就是图像操作能力。可以用于动态的图像合成或者作为图

形的背景，以及游戏界面（Sprites）等等。浏览器支持的任意格式的外部图片都可以使用，

比如NG、GIF或者JEG。你甚至可以将同一个页面中其他canvas元素生成的图片作

为图片源。

引入图像到canvas里需要以下两步基本操作：

1、获得一个指向HTMLImageElement的对象或者另一个canvas元素的引用作为源，

也可以通过提供一个URL的方式来使用图片

2、使用drawImage()函数将图片绘制到画布上

获得需要绘制的图片

canvas的AI可以使用下面这些类型中的一种作为图片的源：

HTMLImageElement

这些图片是由Image()函数构造出来的，或者任何的img元素

HTMLVideoElement

用一个HTML的video元素作为你的图片源，可以从视频中抓取当前帧作为一个

图像

HTMLCanvasElement

可以使用另一个canvas元素作为你的图片源。

ImageBitmap

这是一个高性能的位图，可以低延迟地绘制，它可以从上述的所有源以及其它几种源

中生成。

这些源统一由CanvasImageSorce类型来引用。

有几种方式可以获取到我们需要在canvas上使用的图片。

使用相同页面内的图片

我们可以通过下列方法的一种来获得与canvas相同页面内的图片的引用：

docment.images集合

docment.getElementsByTagName()方法

如果你知道你想使用的指定图片的ID，你可以用docment.getElementById()获得

这个图片

使用其它域名下的图片

在HTMLImageElement上使用crossrigin属性，你可以请求加载其它域名上的图

片。如果图片的服务器允许跨域访问这个图片，那么你可以使用这个图片而不污染canvas，

否则，使用这个图片将会污染canvas。

使用其它canvas元素和引用页面内的图片类似地，用

docment.getElementsByTagName或docment.getElementById方法来获取其它

canvas元素。但你引入的应该是已经准备好的canvas。

一个常用的应用就是将第二个canvas作为另一个大的canvas的缩略图。

由零开始创建图像

或者我们可以用脚本创建一个新的HTMLImageElement对象。要实现这个方法，

我们可以使用很方便的Image()构造函数。

varimg=newImage();//创建一个img元素

img.src=myImage.png;//设置图片源地址

当脚本执行后，图片开始装载。

若调用drawImage时，图片没装载完，那什么都不会发生（在一些旧的浏览器中可

能会抛出异常）。因此你应该用load事件来保证不会在加载完毕之前使用这个图片：

varimg=newImage();//创建img元素

img.onload=fnction(){

//执行drawImage语句

}

img.src=myImage.png;//设置图片源地址

如果你只用到一张图片的话，这已经够了。但一旦需要不止一张图片，那就需要更加

复杂的处理方法。

通过data:url方式嵌入图像

我们还可以通过data:rl方式来引用图像。Datarls允许用一串Base64编码的

字符串的方式来定义一个图片。

img.src=

data:image/gif;base64,R0lGDlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAAL

AAsA