超实用！JS利用Canvas绘制图片部分区域的完整代码示例

```javascript // 获取canvas元素和上下文 const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); // 创建一个新的Image对象 const img = new Image(); img.src = '图片地址'; // 替换为实际图片地址 // 当图片加载完成时执行绘制操作 img.onload = function() { // 设置要绘制的图片区域 const sx = 0; // 起始x坐标 const sy = 0; // 起始y坐标 const sWidth = 100; // 宽度 const sHeight = 100; // 高度 // 设置目标绘制区域 const dx = 50; // 目标x坐标 const dy = 50; // 目标y坐标 const dWidth = 100; // 宽度 const dHeight = 100; // 高度 // 在canvas上绘制图片的指定区域 ctx.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); }; ``` ######[AI写代码神器 | 276点数解答 | 2024-06-06 11:52:33]