HTMLCanvas绘图教程详解

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《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响应头必须存在且匹配。

今天关于《HTMLCanvas绘图教程详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！