前面我们了解了canvas的一些基本使用方法，在canvas中我们还可以在canvas中直接绘制图片，在canvas中绘制图片主要使用到drawImage方法
一：drawImage方法参数有三中情况
1：三个参数
ctx.drawImage(image,dx,dy)image：需要绘制的img图片
dx,dy：绘制的img图片在canvas中的坐标(x,y)
2：五个参数
ctx.drawImage(image,dx,dy,dw,dh)image：需要绘制的img图片
dx,dy：绘制的img图片在canvas中的坐标(x,y)
dw,dh：绘制的img图片在canvas中的大小(w,h)宽高
3：9个参数(用于切片)，通俗的说就是将图片进行特定裁剪然后放到指定的位置
ctx.drawImage(image,sx, sy, sw, sh, dx, dy, dw, dh)image：需要绘制的img图片
sx, sy, sw, sh：定义图像源的切片位置和大小
dx, dy, dw, dh：定义切片的目标显示位置和大小
二：在canvas中绘制图片分两种情况
1：有现成的img图片，将img标签中的图片绘制到canvas中
var canvas = document.getElementById("myCanvas");
if (!canvas.getContext) {return '不支持canvas'
}
var ctx=canvas.getContext("2d")
//创建图片
var img = document.querySelector("img");
//绘制图片
ctx.drawImage(img, 0, 0)2：从零开始创建图片
var canvas = document.getElementById("myCanvas");
if (!canvas.getContext) {return '不支持canvas'
}
var ctx=canvas.getContext("2d")
//创建图片
var img = new Image(); // 创建一个<img>元素
img.onload = function(){ctx.drawImage(img, 0, 0)//绘制图片
}
img.src = 'wj.jpg'; // 设置图片源地址三：根据上面drawImage参数的三种情况，我们来分别实现，看看效果
1：ctx.drawImage(image,dx,dy)：将原始图片绘制到canvas中
var canvas = document.getElementById("myCanvas");
if (!canvas.getContext) {return '不支持canvas'
}
var ctx=canvas.getContext("2d")
//创建图片
var img = new Image(); // 创建一个<img>元素
img.onload = function(){ctx.drawImage(img, 0, 0)//绘制图片
}
img.src = 'wj.jpg'; // 设置图片源地址
2：ctx.drawImage(image,dx,dy,dw,dh)：给图片设置大小绘制到canvas中
var canvas = document.getElementById("myCanvas");
if (!canvas.getContext) {return '不支持canvas'
}
var ctx=canvas.getContext("2d")
//创建图片
var img = new Image(); // 创建一个<img>元素
img.onload = function(){ctx.drawImage(img, 0, 0, 50, 50)//绘制图片
}
img.src = 'wj.jpg'; // 设置图片源地址3:ctx.drawImage(image,sx, sy, sw, sh, dx, dy, dw, dh)：切片，将图片进行特定裁剪然后放到指定的位置
var canvas = document.getElementById("myCanvas");
if (!canvas.getContext) {return '不支持canvas'
}
var ctx=canvas.getContext("2d")
//创建图片
var img = new Image(); // 创建一个<img>元素
img.onload = function(){ctx.drawImage(img, 0, 0, 200, 200, 10, 10, 200, 250)
}
img.src = 'wj.jpg'; // 设置图片源地址
