要使用 Canvas 修改图片的像素大小，需要使用 Canvas 的 API 将图像绘制到 Canvas 上，并在绘制过程中调整像素大小。下面是一个使用 Canvas 修改图片像素大小的示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>修改图片像素大小</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
// 获取 Canvas 元素和上下文
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 创建一个 Image 对象
const image = new Image();
image.src = 'https://www.itshiye.com/wp-content/uploads/2023/03/360se_picture.jpg';
// 图片加载完成后绘制到 Canvas 上
image.onload = () => {
// 定义调整后的像素大小
const newWidth = 200;
const newHeight = 200;
// 设置 Canvas 大小和绘制区域
canvas.width = newWidth;
canvas.height = newHeight;
// 在 Canvas 上绘制图像，并调整像素大小
ctx.drawImage(image, 0, 0, newWidth, newHeight);
}
</script>
</body>
</html>在上面的代码中，我们首先获取了 Canvas 元素和上下文，然后创建了一个 Image 对象，并将其加载到页面中。当图片加载完成后，我们定义了一个新的像素大小，并设置 Canvas 的大小为这个新的像素大小。最后，在 Canvas 上绘制图片，并调整像素大小。
正文完