Canvas：绘制图片

 绘制图片

 

语法：

drawImage()：将原图片像素的内容复制到画布上；

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

三个参数时： 指定图片绘制的x、y坐标；

五个参数时： 指定图片绘制的x、y坐标，以及图片的宽度、高度；

九个参数时： 裁剪的对象 裁剪的位置（x,y）; 裁剪的宽度和高度(w,h); 裁剪后图片绘制的位置(x,y); 图片显示出来的宽度和高度(w,h);

参数	描述
img	规定要使用的图像、画布或视频。
sx	可选。开始剪切的 x 坐标位置。
sy	可选。开始剪切的 y 坐标位置。
swidth	可选。被剪切图像的宽度。
sheight	可选。被剪切图像的高度。
x	在画布上放置图像的 x 坐标位置。
y	在画布上放置图像的 y 坐标位置。
width	可选。要使用的图像的宽度。（伸展或缩小图像）
height	可选。要使用的图像的高度。（伸展或缩小图像）

 

            var img2=new Image()
            img2.src="图片地址"
            img2.onload=function(){
                var i=108;
                var n=0;
                setInterval(()=>{
                    n++
                    n=n%6
                    ctx.clearRect(20,200,108,101)
                  　ctx.drawImage(img2,n*108,0,108,101,20,200,108,101)
                },100)
            }