🎨 画布上的魔法：用 drawImage() 绘制你的专属世界！ ✨
姐妹们！最近在学前端，发现了一个超级神奇的函数 - drawImage()！它就像一个魔法棒，可以把图片、视频甚至画布直接画到画布上，简直太酷了！🥰
以前想在网页上添加图片，只能用标签，现在有了drawImage()，玩法就多多了！比如，你可以把图片放大缩小、旋转、剪裁，甚至可以做一些简单的动画，让你的网页更生动有趣。
今天就来跟大家分享一下我的学习笔记，干货满满，保证让你也能轻松掌握这个技能！💪
💫 drawImage() 函数的三个参数：
1. 图片源： 可以是图片路径、画布对象，甚至是一个视频对象。
2. 目标位置： 使用 x 和 y 坐标来指定图片在画布上的起始位置。
3. 可选参数： 可以指定图片的宽高、缩放比例、以及裁剪区域等等。
✨ 举个栗子：
假设我们想把一张名为 "my-cat.jpg" 的猫咪图片绘制到一个宽高都是 300px 的画布上，而且要让猫咪的头部位于画布的中心，可以用以下代码：
javascript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = new Image();
img.src = "my-cat.jpg";
img.onload = function() {
// 确保图片加载完成
const imgWidth = img.width;
const imgHeight = img.height;
// 计算图片在画布上的中心位置
const x = (canvas.width - imgWidth) / 2;
const y = (canvas.height - imgHeight) / 2;
ctx.drawImage(img, x, y); // 画出猫咪！
💖 你也可以用 drawImage() 做一些更有趣的事：
裁剪图片： 可以用 drawImage() 的第四、第五个参数指定裁剪区域，只绘制图片的一部分。
缩放图片： 可以用第六、第七个参数指定图片的宽高，来实现放大或缩小。
旋转图片： 可以用 canvas.rotate() 函数来旋转画布，然后绘制图片，就能实现图片的旋转效果。
动画效果： 可以结合 setInterval() 函数不断改变图片的位置、大小或形状，实现简单的动画效果。
✨ 学完这几个小技巧，你就可以用drawImage() 创造出各种各样的效果了！
比如，可以制作一个简单的相册，用 drawImage() 把照片展示出来；也可以做一个简单的游戏，用 drawImage() 来显示游戏角色和道具。
你还可以用 drawImage() 来制作个性化的头像，或者做一些创意的艺术作品，尽情发挥你的想象力！
❓ 你最想用 drawImage() 做什么呢？快来评论区跟我分享吧！ 😉