canvas实例扫地僧 北邮 web(10)

参数默认值： 如果没有指定 dw 和 dh， 则默认等于 sw 和 sh， 如果 sx,sy,sw,sh 均没有提供，则默认为sx,xy=0,0；sw 和 sh 为图片的像素宽高。

下面给出图片的几种调用方式：

1．引用页面内图片：

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

2.引用 canvas 元素

和引用页面内的图片类似地，用 document.getElementsByTagName 或

document.getElementByIdx_x 方法来获取其它 canvas 元素。但你引入的应该是已经准备好的canvas。一个常用的应用就是为另一个大的 canvas 做缩略图。

3．创建图像

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

var img = new Image(); // 创建一个实例化图像对象 img.src = 'myImage.png'; //设置对象的路径

当脚本执行后，图片开始装载。若调用 drawImage 时，图片没装载完，脚本会等待直至装载完毕。如果不希望这样，可以使用onload 事件：

var img = new Image(); // 创建一个实例化图像对象 img.onload = function(){

// 执行 drawImage 语句

}

img.src = 'myImage.png'; // 设置对象的路径

如果你只用到一张图片的话，这已经够了。但一旦需要不止一张图片，那就需要更加复杂的处理方法，但图片预装载策略超出本规范的范围。

欲索取更多、更详细课程体系请直接拨打北邮全国免费电话。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-64820-10.html