HTML Canvas drawimage() 方法

在 web 前端开发中，HTML5 的 Canvas 元素是一个非常强大的工具，可以让我们在页面上绘制各种图形、动画等内容。其中，drawImage() 方法是一个常用的方法，用于在 Canvas 上绘制图像。

语法

drawImage() 方法有三种形式的语法：

1. 绘制整个图像：

context.drawImage(image, x, y);

1. 绘制部分图像：

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

1. 绘制缩放图像：

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

参数说明

• image：要绘制的图像，可以是 <img>、<video> 或 <canvas> 元素。
• sx、sy：源图像的起始坐标。
• sWidth、sHeight：源图像的宽度和高度。
• dx、dy：目标图像的起始坐标。
• dWidth、dHeight：目标图像的宽度和高度。

示例代码

绘制整个图像

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
const image = new Image();
image.src = 'image.jpg';

image.onload = function() {
  context.drawImage(image, 0, 0);
};

绘制部分图像

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
const image = new Image();
image.src = 'spritesheet.png';

image.onload = function() {
  context.drawImage(image, 0, 0, 32, 32, 0, 0, 64, 64);
};

绘制缩放图像

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
const image = new Image();
image.src = 'logo.png';

image.onload = function() {
  context.drawImage(image, 0, 0, image.width, image.height, 0, 0, 100, 100);
};

总结

通过 drawImage() 方法，我们可以在 Canvas 上绘制各种图像，并且可以实现图像的裁剪、缩放等功能。在实际开发中，可以根据具体需求灵活运用这个方法，实现丰富多彩的页面效果。