利用canvas画图片

canvas画图片的优点：

一张图片的大小可能有几十M，如果加载在网页中就十分耗费资源；H5时，canvas提供了一个方法 drawImage()：将原图片像素的内容复制到画布上，占用资源就会很小，因为画布是由JS代码编写，就算是几千行代码也才可能几K的大小。

drawImage()方法介绍：

他有9个参数，三种使用情况。

9个参数：

第一个参数img是源图片，可以是img元素或Image构造函数创建的屏幕外图片对象；

需要注意的是在上下文对象调用drawImage()时，img图形必须加载完毕，有两种方法可以有效避免img图片未加载就调用，代码说明：

        <canvas id="cav" width="600" height="600">
		</canvas>
		<img src="图片文件路径" id="img1">
		<script>
			var cav = document.querySelector("#cav")
			var ctx = cav.getContext("2d")
			var img1=document.querySelector("#img1")
            //方法一
			img1.onload=function(){
				//当img把src的资源加载完毕了这个函数才会运行
				ctx.drawImage(img1,100,100)
			}
            //方法二
            window.onload=function(){
                //当浏览器的window加载完毕了这个函数才会运行
				ctx.drawImage(img1,100,100)
            }

第二个参数sx(可选) 开始剪切的 x 坐标位置；（图片的左上角为（0，0）点）

第三个参数sy(可选) 开始剪切的 y坐标位置；

第四个参数swidth(可选) 剪切的宽度；

第五个参数swidth(可选) 剪切的高度；

第六个参数dx 在画布上放置图像的 x 坐标位置;

第七个参数dy 在画布上放置图像的y坐标位置;

第八个参数dwidth(可选) 使用的图像的宽度 ;

第九个参数dheight(可选) 使用的图像的高度 ;

三种使用情况：

三个参数时：drawlmage(img, dx, dy)在画布指定位置绘制原图

五个参数时：drawImage(img, dx, dy, dw, dh)在画布指定位置上按原图大小绘制指定大小的图

九个参数时：drawlmage(img, sx, sy, sw, sh, dx, dy, dw, dh)剪切图像，并在画布上定位被剪切的部分。