HTML Canvas drawImage() 方法
在 web 前端开发中，HTML5 的 Canvas 元素是一个非常强大的工具，可以让我们在页面上绘制各种图形、动画等内容。其中，drawImage() 方法是一个常用的方法，用于在 Canvas 上绘制图像。
语法
drawImage() 方法有三种形式的语法：
- 绘制整个图像：
------------------------ -- ---
- 绘制部分图像：
------------------------ --- --- ------- -------- --- --- ------- ---------
- 绘制缩放图像：
------------------------ --- --- ------- -------- --- --- ------- ---------
参数说明
- image：要绘制的图像，可以是
<img>、<video>或<canvas>元素。 - sx、sy：源图像的起始坐标。
- sWidth、sHeight：源图像的宽度和高度。
- dx、dy：目标图像的起始坐标。
- dWidth、dHeight：目标图像的宽度和高度。
示例代码
绘制整个图像
----- ------ - ------------------------------------ ----- ------- - ------------------------ ----- ----- - --- -------- --------- - ------------ ------------ - ---------- - ------------------------ -- --- --
绘制部分图像
----- ------ - ------------------------------------ ----- ------- - ------------------------ ----- ----- - --- -------- --------- - ------------------ ------------ - ---------- - ------------------------ -- -- --- --- -- -- --- ---- --
绘制缩放图像
----- ------ - ------------------------------------ ----- ------- - ------------------------ ----- ----- - --- -------- --------- - ----------- ------------ - ---------- - ------------------------ -- -- ------------ ------------- -- -- ---- ----- --
总结
通过 drawImage() 方法，我们可以在 Canvas 上绘制各种图像，并且可以实现图像的裁剪、缩放等功能。在实际开发中，可以根据具体需求灵活运用这个方法，实现丰富多彩的页面效果。