参数
- image
绘制到上下文的元素。允许任何的画布图像源，例如：HTMLImageElement、SVGImageElement (en-US)、HTMLVideoElement、HTMLCanvasElement、ImageBitmap、OffscreenCanvas 或 VideoFrame (en-US)。
- sx 可选
需要绘制到目标上下文中的，image 的矩形（裁剪）选择框的左上角 X 轴坐标。可以使用 3 参数或 5 参数语法来省略这个参数。
- sy 可选
需要绘制到目标上下文中的，image 的矩形（裁剪）选择框的左上角 Y 轴坐标。可以使用 3 参数或 5 参数语法来省略这个参数。
- sWidth 可选
需要绘制到目标上下文中的，image 的矩形（裁剪）选择框的宽度。如果不说明，整个矩形（裁剪）从坐标的 sx 和 sy 开始，到 image 的右下角结束。可以使用 3 参数或 5 参数语法来省略这个参数。使用负值将翻转这个图像。
- sHeight 可选
需要绘制到目标上下文中的，image的矩形（裁剪）选择框的高度。使用负值将翻转这个图像。
- dx
image 的左上角在目标画布上 X 轴坐标。
- dy
image 的左上角在目标画布上 Y 轴坐标。
- dWidth
image 在目标画布上绘制的宽度。允许对绘制的 image 进行缩放。如果不说明，在绘制时 image 宽度不会缩放。注意，这个参数不包含在 3 参数语法中。
- dHeight
image 在目标画布上绘制的高度。允许对绘制的 image 进行缩放。如果不说明，在绘制时 image 高度不会缩放。注意，这个参数不包含在 3 参数语法中。
特别注意：
drawImage 有三种调用方式，参数个数不一样。特别注意 9个参数的时候并不是在5个参数的基础上往后添加4个参数，而是在第一个参数后加了4个！！！注意看形参名！！！根据形参名在上面的参数列表中找到对应参数的解释，不然参数搞错了你就搞不懂了。
drawImage(image, dx, dy);
drawImage(image, dx, dy, dWidth, dHeight);
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
话不多说直接看上案例，辅助理解。
现在我们有下面这张 752*500 的熊猫图片：
image.png
先来个基础例子，把图片绘制到我们的canvas上铺满，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>drawImage 用法demo</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
padding: 20px;
}
canvas {
width: 600px;
height: 300px;
border: 1px solid #d3d3d3;
}
</style>
</head>
<body>
<div class="wrap">
<h1>要使用的图片 752*500 :</h1>
<img id="scream"
src="https://img0.baidu.com/it/u=3564791168,3754861520&fm=253&fmt=auto&app=138&f=JPEG?w=752&h=500">
<p>画布 ctx1.drawImage(img, 0, 0, canvas1.width, canvas1.height)</p>
<canvas id="myCanvas1" width="600" height="300">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
</div>
</body>
<script>
var img = document.getElementById("scream");
img.onload = function () {
var canvas1 = document.getElementById("myCanvas1")
var ctx1 = canvas1.getContext("2d");
ctx1.drawImage(img, 0, 0, canvas1.width, canvas1.height); // 铺满
}
</script>
</html>
效果如下：
image.png
现在我们修改下 ctx1.drawImage 的参数：
3个参数和5个参数的用法
1. ctx1.drawImage(img, 0, 0) 效果
image.png
可以看到3个参数的时候是直接绘制，图片不会缩放，与要绘制的图片相比 canvas 过小将无法显示全图，canvas 过大将留白。
2. ctx1.drawImage(img, 0, 0, 307, 260) 效果
image.png
5个参数，指定了绘制图片的宽高，若绘制的宽高和图片宽高不同将对图片进行缩放。
3. ctx1.drawImage(img, 20, 5, 307, 260)
image.png
距离画布有横向20纵向为5的间距
4.ctx1.drawImage(img, -100, 5, 307, 260);
image.png
间距可以是负数
9个参数的用法 - 裁剪
现在我只想把这个熊猫绘制到画布上
image.png
代码为：ctx1.drawImage(img, 100, 110, 307, 260, 0, 0, canvas3.width, canvas3.height)
image.png
第2-5个参数都是针对图片的，是相较于5个参数的调用方式多出来的一部分参数。这行代码可以这样理解，我要从原始图片横向 100px 纵向 110px 位置裁剪出宽 307px 高 260px大小的图片，然后绘制到canvas上，距离canvas没有间距且铺满整个canvas。
扩展
可以利用 drawImage 将视频绘制到canvas ，如菜鸟教程上的demo
image.png
那么如在线监控的视频流之类的也可以绘制到canvas上，比如 h265web.js 就是这样做的。
通过上面的demo，相信大家对 canvas 的 drawImage 方法参数有了明确的理解。
若对你有帮助，请点个赞吧，若能打赏不胜感激，谢谢支持！
本文地址：https://www.jianshu.com/p/a1fde791220f?v=1713925445016，转载请注明出处，谢谢。
参考：
https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage
https://www.runoob.com/jsref/met-canvas-drawimage.html
网友评论