HTMLCanvas画图教程详解

一分耕耘，一分收获！既然都打开这篇《HTML Canvas绘制图片教程》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

可通过Canvas API动态绘图：一、用drawImage(img,x,y)绘制完整图片；二、用drawImage(img,x,y,w,h)缩放绘制；三、用九参数形式截取并绘制局部区域；四、用Promise封装加载避免异步失败；五、设crossOrigin属性并配CORS头处理跨域限制。

如果您希望在网页中动态绘制图片，而不是直接使用标签静态显示，则可以通过HTML的元素结合JavaScript实现。以下是使用Canvas绘制图片元素的具体方法：

一、使用drawImage()绘制完整图片

该方法将图像源完整绘制到Canvas指定位置，适用于加载后直接呈现原图。需确保图片已加载完成，否则Canvas将不显示内容。

1、在HTML中定义元素，并设置其id属性以便JavaScript获取。

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响应头必须存在且匹配。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。