canvas基础入门系列教程(6)-绘制图片
4.绘制图片
在canvas中使用到的图片并不是通过js去画的，如果每张图片都是用js去画，那么会相当麻烦，例如：游戏开发中的地图、背景、人物等，这些素材如果直接用js去画，先不考虑难度问题，就是画这些内容工作量就非常大了，因此，canvas提供了方法可以直接讲图片加载到canvas中，这样就方便多了
4.1.绘制图片体验
在canvas中绘制图片，实际上说的是把图片加载到canvas中，我们需要通过canvas的drawImage方法来完成
// 语法
ctx.drawImage(image, dx, dy)
参数说明
image 图片对象
dx 目标画布的左上角在目标canvas上 X 轴的位置。
dy 目标画布的左上角在目标canvas上 Y 轴的位置。
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#cvs{
border: 1px solid #ddd;
}
</style>
</head>
<body>
<canvas width="600" height="300" id="cvs"></canvas>
<script>
var oCanvas = document.getElementById('cvs')
var ctx = oCanvas.getContext('2d')
var oImg = new Image()
oImg.src = 'img/2019-01-17-16-24-40.png'
oImg.onload = function () {
ctx.drawImage(oImg, 0, 0)
}
</script>
</body>
</html>
4.2.drawImage方法的其他调用方式
drawImage还有两种调用方式，主要是传入参数的不同
// 第二种调用方式
ctx.drawImage(image, dx, dy, dWidth, dHeight);
参数说明
image 图片对象
dx 目标画布的左上角在目标canvas上 X 轴的位置。
dy 目标画布的左上角在目标canvas上 Y 轴的位置。
dWidth 可选，在目标画布上绘制图像的宽度。 允许对绘制的图像进行缩放。 如果不说明， 在绘制时图片宽度不会缩放。
dHeight 可选，在目标画布上绘制图像的高度。 允许对绘制的图像进行缩放。 如果不说明， 在绘制时图片高度不会缩放
这种方式只是比第一种方式多了宽度和高度设置，可以对图片进行缩放后显示到canvas上
实例：
var oCanvas = document.getElementById('cvs')
var ctx = oCanvas.getContext('2d')
var oImg = new Image()
oImg.src = 'img/2019-01-17-16-24-40.png'
oImg.onload = function () {
ctx.drawImage(oImg, 0, 0, 100, 200)
}
// 第三种调用方式
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
参数说明
image 图片对象
dx 目标画布的左上角在目标canvas上 X 轴的位置。
dy 目标画布的左上角在目标canvas上 Y 轴的位置。
dWidth 可选，在目标画布上绘制图像的宽度。 允许对绘制的图像进行缩放。 如果不说明， 在绘制时图片宽度不会缩放。
dHeight 可选，在目标画布上绘制图像的高度。 允许对绘制的图像进行缩放。 如果不说明， 在绘制时图片高度不会缩放。
sx 可选，需要绘制到目标上下文中的，源图像的矩形选择框的左上角 X 坐标。
sy 可选，需要绘制到目标上下文中的，源图像的矩形选择框的左上角 Y 坐标。
sWidth 可选，需要绘制到目标上下文中的，源图像的矩形选择框的宽度。如果不说明，整个矩形从坐标的sx和sy开始，到图像的右下角结束。
sHeight 可选，需要绘制到目标上下文中的，源图像的矩形选择框的高度。
var oCanvas = document.getElementById('cvs')
var ctx = oCanvas.getContext('2d')
var oImg = new Image()
oImg.src = 'img/2019-01-17-16-24-40.png'
oImg.onload = function () {
ctx.drawImage(oImg, 50, 80, 100, 200, 30, 30, 100, 200)
}
sx, sy, sWidth, sHeight这4个参数操作的是源文件，根据这4个参数把图片截取下来，然后根据dx, dy, dWidth, dHeight这4个参数显示到canvas中
4.3.图片平铺
我们可以使用createPattern和fillRect来实现图片的平铺效果
// 语法
ctx.createPattern(image, repetition)
参数说明
image 图片对象
repetition 指定如何重复图像
说明：repetition可以取以下值
repeat (both directions，水平和垂直放向都平铺)
repeat-x (horizontal only， 水平方向平铺)
repeat-y (vertical only， 垂直放向平铺)
no-repeat (neither， 不平铺)
实例：
var oCanvas = document.getElementById('cvs')
var ctx = oCanvas.getContext('2d')
var oImg = new Image()
oImg.src = 'img/2019-01-17-17-15-44.png'
oImg.onload = function () {
// ctx.drawImage(oImg, 50, 80, 100, 200, 30, 30, 100, 200)
var pattern = ctx.createPattern(oImg, 'repeat')
ctx.fillStyle = pattern
ctx.fillRect(0, 0, 300, 300)
}
4.4.图片剪切
做图片剪切需要用到clip方法
// 语法
ctx.clip()
剪切图片的步骤：
1. 绘制一个图形作为剪切区域
2. 调用clip方法
3. 绘制图片
实例：
var oCanvas = document.getElementById('cvs')
var ctx = oCanvas.getContext('2d')
// 1. 绘制剪切区域
ctx.beginPath()
ctx.arc(100, 100, 50, 0, 360 * Math.PI/180)
ctx.closePath()
ctx.strokeStyle = "red"
ctx.stroke()
// 2. 调用方法
ctx.clip()
// 3. 绘制被剪切图像
var oImg = new Image()
oImg.src = 'img/2019-01-17-16-24-40.png'
oImg.onload = function () {
// ctx.drawImage(oImg, 50, 80, 100, 200, 30, 30, 100, 200)
var pattern = ctx.createPattern(oImg, 'repeat')
ctx.fillStyle = pattern
ctx.fillRect(0, 0, 300, 300)
}