绘制图片
绘制图片的前提是引入图片：
let img = new Image()
img.src = "图片地址"
- 第一种绘制图片的方式：
ctx.drawImage(img,x1,y1)img是图片信息，x1,y1是图片绘制的起点。（图片比例不变，超出画布的部分不显示） - 第二种绘制图片的方式：
ctx.drawImage(img,x1,y1,x2,y2)img是图片信息，x1,y1是图片绘制的起点， x2,y2是图片绘制的终点。（图片比例改变，按照起点终点限制的矩形进行图片缩放） - 第二种绘制图片的方式：
ctx.drawImage(img,x1,y1,x2,y2)img是图片信息，x1,y1是图片绘制的起点， x2,y2是图片绘制的终点。 - 第三种绘制图片的方式：
裁剪图片ctx.drawImage(img,x1,y1,x2,y2,x3,y3,x4,y4)img是图片信息，x1,y1是裁剪图片的起点， x2,y2是裁剪图片的宽度和高度，x3,y3是画布的起点，x4,y4是在画布是那个渲染的宽高
eg：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- -->
<canvas
id = "canvas1"
width="600"
height="600"
style="background: lightgray"
></canvas>
<script>
// 找到画布
var canvas1 = document.getElementById("canvas1")
var ctx = canvas1.getContext("2d")
// 获取图片
let img = new Image()
img.src = "https://gd-hbimg.huaban.com/73dd3a9a1b2d252d167dcf150db368bd9df08e7181c20-Mstdc5_fw1200"
// 图片加载完之后进行绘制
img.onload = function(){
// 第一种绘制图片的方式：ctx.drawImage(img,x1,y1) img是图片信息，x1,y1是图片绘制的起始地址
// ctx.drawImage(img,0,0)
// 第二种绘制图片的方式：ctx.drawImage(img,x1,y1,x2,y2) img是图片信息，x1,y1是图片绘制的起点， x2,y2是图片绘制的终点。
// ctx.drawImage(img,0,0,500,500)
// 第三种绘制图片的方式：裁剪图片 ctx.drawImage(img,x1,y1,x2,y2,x3,y3,x4,y4) img是图片信息，x1,y1是裁剪图片的起点， x2,y2是裁剪图片的宽度和高度，x3,y3是画布的起点，x4,y4是在画布是那个渲染的宽高
ctx.drawImage(img,250,250,500,500, 0,0, 250,250)
}
</script>
</body>
</html>
第一种绘制图片的方式：
第二种绘制图片的方式：
第三种绘制图片的方式：
绘制视频
视频的绘制
视频度绘制本质上还是一张张图片的绘制，所以视频绘制仍然使用的是drawImage实现。
eg：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- -->
<canvas
id = "canvas1"
width="1000"
height="600"
style="background: lightgray"
></canvas>
<video src="./coverr-old-man-flipping-the-pages-of-a-notebook-8991-1080p.mp4" controls></video>
<button id="btn">播放/暂停</button>
<script>
// 找到画布
var canvas1 = document.getElementById("canvas1")
var ctx = canvas1.getContext("2d")
// 获取视频
var video = document.querySelector("video")
var button = document.querySelector("#btn")
button.onclick = function(){
video.play();
ctx.drawImage(video,0,0,1000,600)
render()
}
function render(){
ctx.drawImage(video,0,0,1000,600)
requestAnimationFrame(render)
}
</script>
</body>
</html>
效果：
水印添加
直接再绘制视频图片的时候将水印的logo也进行绘制。
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- -->
<canvas
id = "canvas1"
width="1000"
height="600"
style="background: lightgray"
></canvas>
<video src="./coverr-old-man-flipping-the-pages-of-a-notebook-8991-1080p.mp4" controls></video>
<button id="btn">播放/暂停</button>
<script>
// 找到画布
var canvas1 = document.getElementById("canvas1")
var ctx = canvas1.getContext("2d")
// 获取视频
var video = document.querySelector("video")
var button = document.querySelector("#btn")
button.onclick = function(){
video.play();
ctx.drawImage(video,0,0,1000,600)
render()
}
var img = new Image()
img.src = "./1.jpg"
function render(){
ctx.drawImage(video,0,0,1000,600)
// 水印
ctx.drawImage(img, 900,500, 50,50)
requestAnimationFrame(render)
}
</script>
</body>
</html>