9.在canvas绘制图片和视频

drawImage

该方法主要用于在画布上绘制图片

参数1
绘制到上下文的元素。允许任何的画布图像源，例如：HTMLImageElement、SVGImageElement (en-US)、HTMLVideoElement、HTMLCanvasElement、ImageBitmap、OffscreenCanvas 或 VideoFrame (en-US)。

参数2（可选）
需要绘制到目标上下文中的，image 的矩形（裁剪）选择框的左上角 X 轴坐标。可以使用参数3或参数5语法来省略这个参数。

参数3（可选）
需要绘制到目标上下文中的，image 的矩形（裁剪）选择框的左上角 Y 轴坐标。可以使用参数3或参数5语法来省略这个参数。

参数4（可选）
需要绘制到目标上下文中的，image 的矩形（裁剪）选择框的宽度。如果不说明，整个矩形（裁剪）从坐标的 sx 和 sy 开始，到 image 的右下角结束。可以使用参数3或参数5语法来省略这个参数。使用负值将翻转这个图像。

参数5（可选）
需要绘制到目标上下文中的，image的矩形（裁剪）选择框的高度。使用负值将翻转这个图像。

参数6
image 的左上角在目标画布上 X 轴坐标。

参数7
image 的左上角在目标画布上 Y 轴坐标。

参数8
image 在目标画布上绘制的宽度。允许对绘制的 image 进行缩放。如果不说明，在绘制时 image 宽度不会缩放。注意，这个参数不包含在参数3语法中。

参数9
image 在目标画布上绘制的高度。允许对绘制的 image 进行缩放。如果不说明，在绘制时 image 高度不会缩放。注意，这个参数不包含在参数3语法中。

该方法的参数较多，参数之间互有影响，我们总体把他分为三种使用方式

1.基础绘制

let c1 = document.getElementById('c1')
let ctx = c1.getContext('2d')
let imgEle = new Image()
imgEle.src = 'https://oss-stock5.xpccdn.com/prod/photo/46c575a77dc64f6cbd9cd595874686d0.jpg?x-oss-process=style/stock_photo_watermark'
imgEle.addEventListener('load', function() {
  // 第一种最简单的绘制
  // 参数1为图片路径
  // 参数2为图片位于画布的x坐标
  // 参数3为图片位于画布的y坐标
  ctx.drawImage(imgEle, 0, 0)
})
1
2
3
4
5
6
7
8
9
10
11

2.缩放绘制

let c1 = document.getElementById('c1')
let ctx = c1.getContext('2d')
let imgEle = new Image()
imgEle.src = 'https://oss-stock5.xpccdn.com/prod/photo/46c575a77dc64f6cbd9cd595874686d0.jpg?x-oss-process=style/stock_photo_watermark'
imgEle.addEventListener('load', function() {
  // 第二种绘制（可以对原图进行缩放）
  // 参数1为图片路径
  // 参数2为图片位于画布的x坐标
  // 参数3为图片位于画布的y坐标
  // 参数4为图片放置画布上的宽度
  // 参数5为图片放置画布上的高度
  ctx.drawImage(imgEle, 0, 0, 500, 500)
})
1
2
3
4
5
6
7
8
9
10
11
12
13

3.裁剪绘制

let c1 = document.getElementById('c1')
let ctx = c1.getContext('2d')
let imgEle = new Image()
imgEle.src = 'https://oss-stock5.xpccdn.com/prod/photo/46c575a77dc64f6cbd9cd595874686d0.jpg?x-oss-process=style/stock_photo_watermark'
imgEle.addEventListener('load', function() {
  // 第三种绘制（可进行图片裁剪）
  // 参数1为图片路径
  // 参数2为图片裁剪点的x坐标
  // 参数3为图片裁剪点的y坐标
  // 参数4为图片裁剪的宽度
  // 参数5为图片裁剪点的高度
  // 参数6为图片位于画布的x坐标
  // 参数7为图片位于画布的y坐标
  // 参数8为图片放置画布上的宽度
  // 参数9为图片放置画布上的高度
  ctx.drawImage(imgEle, 200, 100, 500, 300, 0, 0, 500, 300)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

视频的绘制与图片一样

let videoEle = document.createElement('video')
videoEle.src = 'https://us-stock5.xpccdn.com/ee53aa95-44e9-4da6-b236-34d8826be141.mp4'
document.querySelector('button').addEventListener('click', function () {
  videoEle.play()
})
videoEle.addEventListener('loadedmetadata', function () {
  drawVideo()
})
//需要注意的是需要完整绘制视频必须使用requestAnimationFrame不停绘制，否则只会显示开始的一帧图片。
function drawVideo() {
  ctx.drawImage(videoEle, 0, 0, 500, 500);
  requestAnimationFrame(drawVideo);
}
1
2
3
4
5
6
7
8
9
10
11
12
13