放在前面的话：
canvas是HTML5提供的新标签，标签用于绘制图像（通过脚本，通常是 JavaScript）。但是，<canvas> 元素本身并没有绘制能力，它仅仅是作为存放图形的容器， 我们使用脚本来完成实际的绘图任务。getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。那现在就对drawImage()的学习做一个总结：
drawImage方法的作用：
在画布上绘制图像、画布或视频，也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。
js语法：
1.context.drawImage(img,x,y);
在画布上定位图像。
参数：
img ：规定要使用的图像、画布或视频。
x:在画布上放置图像的x坐标轴位置。
y:在画布上放置图像的y坐标轴位置。
举例如下：
<body>
<img src="img/planets.gif" id="myImg" />
<canvas id="myCanvas"></canvas>
<!-- <video src="video/111.mp4" id="video" controls=""></video> -->
<script>
let img=new Image();
img.src="img/sun.gif";
var _img=document.getElementById("myImg");
var _canvas=document.getElementById("myCanvas");
var _video=document.getElementById("video");
var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
ctx=c.getContext('2d');
_canvas.style.width =146*2+"px";
_canvas.style.height=126*2+"px";
_canvas.style.border="1px solid blue";
var ctx=_canvas.getContext('2d');
_img.onload=function(){
ctx.drawImage(_img,1,1,146,126)
}
</script>
</body>
2.context.drawImage(img,x,y,width,height);
在画布上定位图像，并规定图像的宽度和高度。
参数：
img ：规定要使用的图像、画布或视频。
x:在画布上放置图像的x坐标轴位置。
y:在画布上放置图像的y坐标轴位置。
width：显示在画布上图片的宽度。
height：显示在画布上图片的高度。
<body>
<img src="img/planets.gif" id="myImg" />
<canvas id="myCanvas"></canvas>
<!-- <video src="video/111.mp4" id="video" controls=""></video> -->
<script>
let img=new Image();
img.src="img/planets.gif";
var _img=document.getElementById("myImg");
var _canvas=document.getElementById("myCanvas");
var _video=document.getElementById("video");
var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
_canvas.style.width =146+"px";
_canvas.style.height=126+"px";
_canvas.style.border="1px solid blue";
var ctx=_canvas.getContext('2d');
img.onload=function(){
ctx.drawImage(img,0,0,146,126);
}
</script>
</body>
3.context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
剪切图像，并在画布上定位被剪切的部分。
参数：
img ：规定要使用的图像、画布或视频。
sx:可选。开始剪切的 x 坐标位置。
sy:可选。开始剪切的 xy坐标位置。
x:在画布上放置图像的x坐标轴位置。
y:在画布上放置图像的y坐标轴位置。
width：显示在画布上图片的宽度。
height：显示在画布上图片的高度。
swidth：可选。被剪切图像的宽度。
sheight:可选。被剪切图像的高度。
<body>
<img src="img/1.jpg" id="myImg" />
<canvas id="myCanvas" ></canvas>
<script>
let img=new Image();
img.src="img/1.jpg";
var _img=document.getElementById("myImg");
var _canvas=document.getElementById("myCanvas");
var c=document.getElementById("myCanvas");
_canvas.style.border="1px solid blue";
var ctx=_canvas.getContext('2d');
img.onload=function(){
ctx.drawImage(img,100,100,200,200,20,20,150,150);
}
</script>
</body>
总结：
使用 drawImage()方法可以用来将图片映射到画布上，映射的方式分为三种：
1.定位图像显示在画布上的位置。
2.定位图像的位置的同时 还可以设置图像显示的高度和宽度。
3.定位图像的位置以及设置图像显示的高度和宽度的同时还可以对图像进行剪切。