Canvas 的mozilla教程-应用图像

Canvas 相当有趣的一项功能就是可以引入图像,它可以用于图片合成或者制作背景等。而目前仅可以在图像中加入文字(标准说明中并没有包含绘制文字的功能)。只要是 Gecko 支持的图像(如 PNG,GIF,JPEG等)都可以引入到 canvas 中,而且其它的 canvas 元素也可以作为图像的来源。

引入图像

引入图像只需要简单的两步:

第一当然是来源图片,不是简单的 URL 路径,但可以是一个 JavaScript 的 Image 对象引用,又或者其它的 canvas 元素。

然后用 drawImage 方法将图像插入到 canvas 中。

先来看看第一步,基本上有四种可选方式:

1.引用页面内的图片

我们可以通过 document.images 集合、document.getElementsByTagName 方法又或者 document.getElementById 方法来获取页面内的图片(如果已知图片元素的 ID。

2.使用其它 canvas 元素

和引用页面内的图片类似地,用 document.getElementsByTagName document.getElementById 方法来获取其它 canvas 元素。但你引入的应该是已经准备好的 canvas,一个常用的应用就是为另一个大的 canvas 做缩略图。

3.由零开始创建图像

另外,我们可以用脚本创建一个新的 Image 对象,但这种方法的主要缺点是如果不希望脚本因为等待图片装置而暂停,还得需要突破预装载。

我们可以通过下面简单的方法来创建图片:

  1. var

    Leave a Comment

    电子邮件地址不会被公开。 必填项已用*标注

计算器