1、 使用canvas绘制图像
什么是图像？在js中它就是一个<img src=””>，<img>有两种接收图像信息的方法，一个是直接链接到图像地址，一个使用base64数据，不过这里讨论的是canvas要使用的Image对象。我们有两个方式定义：
<1>在html中定义好，然后根据id获取
var img=document.getElementById("scream");
<2>新建image对象
var img = new Image(); img.onload = function(){//在这里面进行对图像对象的操作 ctx.drawImage(img,0,0); }; img.src = 'img/6.png';
得到img对象后，我们有三种方式在canvas上绘制你想要的图像。
<1>只定义开始绘制的坐标，图像的宽和高取决于原图像文件的大小
ctx.drawImage(img,10,10);//***第一种，三个参数分别是Image,绘制开始的x,y
<2>定义开始的坐标，和绘制的宽和高
ctx.drawImage(img,100,100,width,height);//***第二种，三个参数分别是Image,绘制开始的x,y和拉伸的宽度高度
<3>切割原图片，并绘制到canvas的制定位置
ctx.drawImage(img,sx,sy,sw,sh,200,80,sw,sh);//***第三种，三个参数分别是Image,切割原图的开始坐标和宽高，绘制开始的x,y和拉伸的宽度高度
附完整的代码：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8"/>
<script src='js/jquery-3.3.1.min.js'></script>
<style>
body{
background:black;
text-align:center;
}
#myCanvas{
background:white;
}
#contain{
100%;
height:600px;
}
#scream{
100%;
}
</style>
</head>
<body>
<img src="img/7.png" id="scream" hidden>
<div id="contain">
<canvas id="myCanvas"></canvas>
</div>
<script type="text/javascript">
$(document).ready(function(){
var contain = document.getElementById('contain');
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
c.width=contain.offsetWidth;
c.height=contain.offsetHeight;//***根据容器大小设置宽和高
/*从dom元素中获取图像*/
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);//***第一种，三个参数分别是Image,绘制开始的x,y
var width = img.width;
/*新建一个图像元素*/
var img = new Image();
img.onload = function(){
var sw = img.width;
var sh = img.height;
var height = width*sh*1.0/sw;
ctx.drawImage(img,100,100,width,height);//***第二种，三个参数分别是Image,绘制开始的x,y和拉伸的宽度高度
var sx = sw-width;
var sy = sh-height;
ctx.drawImage(img,sx,sy,sw,sh,200,80,sw,sh);//***第三种，三个参数分别是Image,切割原图的开始坐标和宽高，绘制开始的x,y和拉伸的宽度高度
/*后面设置的是原图的宽和高，并不是切割出来的部分的宽和高，需要转换*/
};
img.src = 'img/6.png';//*这个图像请比第一个大一点，最好大很多
});
</script>
</body>
</html>
参考：
Js中获取各种宽度高度的问题：
https://www.cnblogs.com/wangkongming/p/6195903.html