【第4章图像与视频】4.1 图像的绘制

ncj393437906

已于 2025-05-29 11:38:34 修改

阅读量800

点赞数 19

CC 4.0 BY-SA版权

分类专栏：《HTML5 Canvas核心技术图形、动画与游戏开发》文章标签： Canvas

于 2025-05-29 11:35:45 首次发布

本文链接：https://blog.csdn.net/ncj393437906/article/details/148306250

《HTML5 Canvas核心技术图形、动画与游戏开发》专栏收录该内容

41 篇文章

订阅专栏

前言

drawImage() 方法可以将一幅图像的整体或某个部分绘制到 canvas 内的任何位置上，并且允许开发者在绘制过程中对图像进行缩放。也可以将图像绘制在离屏 canvas 中，这样的话就可以对图像进行一些有技巧性地处理了，例如实现图像查看器。

在 Canvas 之中绘制图像

应用程序首先创建了一幅图像，设置了它的数据源，然后等待浏览器加载图片，在图片加载完成后，将其绘制与 canvas 的左上角。

这就是 drawImage() 最简单的用法了。采用这种方式，可以把一整张未经缩放的图形绘制在 canvas 中，该方式的唯一缺点则是你必须等待图像加载完毕后才能对其进行绘制。如果在图像尚未完成加载时就进行绘制，那么根据 Canvas 规范，drawImage() 方法会执行失败，而且没有任何提示。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>4-1-图像的绘制</title>
		<style>
			body {
				background: #eeeeee;
			}

			#canvas {
				background: #ffffff;
				margin-top: 5px;
				margin-left: 10px;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="800" height="600"></canvas>

		<script>
			const canvas = document.getElementById('canvas'),
				context = canvas.getContext('2d'),
				image = new Image()

			image.src = './waterfall.png'
			image.onload = () => {
				context.drawImage(image, 0, 0)
			}
		</script>
	</body>
</html>

drawImage() 方法的用法

drawImage() 方法会将一幅图像绘制到一个 canvas之中，所绘的图像叫做“源图像”（source image），而绘制到的地方则叫做“目标canvas”（destination canvas）。这里的image参数可以是 HTMLImageElement 对象、HTMLCanvasElement 对象、HTMLVideoElement 对象。

drawImage() 方法可以接受以下3套参数：

第一种用法，会将整幅图像原样绘制在目标 canvas 中的指定位置上。

drawImage(image, dx, dy)

第二种用法，会将图像完整地绘制到指定的位置上，然而，在绘制时会根据目标区域的宽度与高度进行缩放。

drawImage(image, dx, dy, dWidth, dHeight)

第三种用法，可以将整幅图像或其一部分绘制到目标 canvas 的指定位置上，而且在绘制时会根据目标区域的宽度和高度对图像进行缩放。

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

在这里插入图片描述

【第4章 图像与视频】4.1 图像的绘制

文章目录

前言

在 Canvas 之中绘制图像

drawImage() 方法的用法

【第4章图像与视频】4.1 图像的绘制