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)剪切图像,并在画布上定位被剪切的部分。