绘制图片
context.drawImage(img,x,y)：方法在画布上绘制图像、画布或视频，在画布上定位图像。
context.drawImage(img,x,y,width,height)：在画布上定位图像，并规定图像的宽度和高度：
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)：剪切图像，并在画布上定位被剪切的部分：
参数
img：规定要使用的图像、画布或视频。不能填图片的网址，和图片的相对路径，它不会做网络请求。只能填写图片的编码，可以填写img元素节点，前提条件是图片要先加载完毕后，才能用img元素节点来绘制图片。
sx：可选，开始剪切的 x 坐标位置。
sy：可选，开始剪切的 y 坐标位置。
swidth：可选，被剪切图像的宽度。
sheight：可选，被剪切图像的高度。
x：在画布上放置图像的 x 坐标位置。
y：在画布上放置图像的 y 坐标位置。
width：可选，要使用的图像的宽度，（伸展或缩小图像）
height：可选，要使用的图像的高度，（伸展或缩小图像）
<body>
<style>
#canvas {
border: 1px goldenrod solid;
}
</style>
<canvas id="canvas" width="1500px" height="1000px"></canvas>
<script>
/** @type {HTMLCanvasElement} */
let canvas=document.querySelector("#canvas");
let ctx=canvas.getContext("2d");
//创建一个Image对象,定义Image对象的src,这样做就相当于给浏览器缓存了一张图片。
let img1=new Image();
img1.src="../DOM操作/image/img-a30d63eab9eab3fc6c02db6696786196.jpg";
let img2=new Image();
img2.src="../DOM操作/image/mmexport1572688935095.jpg";
// img1.onload=function(){
// //当img1把src的资源加载完毕了这个函数才会执行
// //img1这个元素节点就可以获取到图片，画布中就可以绘制出来
//图片必须要加载完毕，才能绘制
// ctx.drawImage(img1,10,10);
// };
window.onload=function(){
//当浏览器的window加载完毕后这个函数就会执行
ctx.drawImage(img1,10,10);
ctx.drawImage(img2,700,20);
};
//img元素先加载完，window对象后加载完即img.onload比window.onload先运行完毕。
</script>
利用计时器裁剪图片做成动画效果
let canvas=document.querySelector("#canvas");
let ctx=canvas.getContext("2d");
let image=new Image();
image.src="./h_proc.jpg";
window.onload=function(){
let i=0;
setInterval(()=>{
canvas.width=canvas.width;
//一张小图宽为108，随着裁剪的x增大就裁剪到后面的图
//i%10:被除数取余数不会超过除数，则i%10中的i为0-9
i=i%10;
i++;
ctx.drawImage(image,i*108,0,108,101,20,200,108,101);
},30);
};
