可通过Canvas API动态绘图：一、用drawImage(img,x,y)绘制完整图片；二、用drawImage(img,x,y,w,h)缩放绘制；三、用九参数形式截取并绘制局部区域；四、用Promise封装加载避免异步失败；五、设crossOrigin属性并配CORS头处理跨域限制。
如果您希望在网页中动态绘制图片，而不是直接使用标签静态显示，则可以通过HTML的canvas>元素结合JavaScript实现。以下是使用Canvas绘制图片元素的具体方法：
一、使用drawImage()绘制完整图片
该方法将图像源完整绘制到Canvas指定位置，适用于加载后直接呈现原图。需确保图片已加载完成，否则Canvas将不显示内容。
1、在HTML中定义
2、使用document.getElementById()获取Canvas上下文对象ctx。
立即学习“前端免费学习笔记（深入）”；
3、创建new Image()实例，设置其src属性为图片路径。
4、在Image对象的onload回调中调用ctx.drawImage(img, x, y)，其中x、y为左上角绘制坐标。
二、按指定尺寸缩放绘制图片
通过扩展drawImage()参数，可在绘制时强制设定目标宽度和高度，实现等比或非等比缩放，适用于响应式布局或图标适配场景。
1、保持前一步骤中Image加载逻辑不变。
2、在onload回调中调用ctx.drawImage(img, x, y, width, height)，width与height为Canvas上最终渲染的像素尺寸。
3、若需保持宽高比，需预先计算目标尺寸并赋值，避免直接传入0或负数，否则抛出InvalidStateError。
三、截取图片局部区域并绘制
利用drawImage()九参数形式，可从原始图片中选取任意矩形区域（源裁剪区），再将其映射绘制到Canvas上的目标矩形区域，适用于图片编辑、精灵图提取等操作。
1、确保Image对象已完成加载。
2、调用ctx.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)。
3、sx与sy为源图像裁剪起始坐标，sWidth与sHeight为裁剪区域宽高；dx、dy为目标绘制起始点，dWidth与dHeight为目标区域尺寸。
4、sx、sy不能超出图片原始尺寸边界，否则裁剪结果为空白。
四、使用Promise封装图片加载流程
为避免因图片异步加载导致的绘制失败，可将Image加载过程包装为Promise，配合async/await提升代码可读性与错误处理能力。
1、定义loadImage(src)函数，返回new Promise((resolve, reject) => {...})。
2、在Image.onload中调用resolve(img)，在onerror中调用reject(new Error('Failed to load image'))。
3、在async函数中await loadImage('path/to/image.png')，随后执行ctx.drawImage()。
4、必须捕获Promise rejection，否则未加载的图片会导致静默失败。
五、处理跨域图片限制
当图片来自不同源且未配置CORS头时，Canvas会因安全策略拒绝读取或绘制该图片，表现为绘图无效且后续toDataURL()报错。
1、为Image对象设置crossOrigin属性为'anonymous'，如img.crossOrigin = 'anonymous'。
2、确保目标服务器在响应头中包含Access-Control-Allow-Origin: *或指定域名。
3、若服务端不可控，可将图片代理至同源后端接口，再加载代理URL。
4、仅设置crossOrigin属性不足以绕过限制，服务端CORS响应头必须存在且匹配。
