这些 Canvas 小技巧，保证你新年用得上-杭州抖音短视频直播商城开发为你呈现

一键加滤镜

快速合成音视频

轻松挑选视频封面

……

Canvas 能够做这些？

作为资深的开发者，相信大家对 Canvas 都不陌生。这项能力在绘制图形方面发挥着极大的作用，高效支持图片编辑、数据可视化等应用场景。但是只局限于一般能力应用，那格局就小了

Canvas 的应用场景非常丰富！赶紧往下看看这些隐藏的 Canvas 小技巧，保证你新年用得上！还有手把手教程以及文末彩蛋哟。

适用场景：图片分享海报

相关 API：RenderingContext／Canvas／wx.canvasToTempFilePath

Step 1: 创建实例获取对象

创建 Canvas 实例，获取 CanvasRenderingContext2D 对象（Canvas 绘图上下文）来绘制形状、文本、图像等

Step 2: 设置宽高调整图片

获取 Canvas 绘图上下文后，将 Canvas 的宽高设置为节点宽高 * 设备像素比，绘制出来的图片更清晰

Step 3: 绘制内容

使用 CanvasRenderingContext2D 绘制，根据业务需要在画布中绘制头像、文字、背景等

Step 4: 生成并保存本地

使用 wx.canvasToTempFilePath 将画布生成图片，wx.saveImageToPhotosAlbum 将图片保存到本地

示例：视频文件绘制 Canvas

• Canvas 2d 写法：canvas.drawImage(video, ...)
• webgl 写法：gl.texImage2D(..., video)

-- • 视频解码并绘制到 webgl • --

适用场景：添加特效、贴图等视频编辑场景

Step 1: 创建视频解码器进行解码

1. 通过 gl.texImage2D(..., image) 将解码数据绘制到 webgl

2. 使用 webgl.requestAnimationFrame 继续绘制，效果更加流畅

Step 3: 添加音频播放器同步播放音频

适用场景：将动画、编辑过的视频导出视频文件保存

-- •高效图像处理彩蛋 • --

学会以上这些 Canvas 小技巧，还担心新年的美图美照美视频处理不过来？赶紧码下这个 Canvas 代码包，保证你就是家里最闪耀的靓女靓仔 

预祝大家新的一年 Canvas 在手，红包一直有！