uni.createCanvasCOntext

`uni.createCanvasContext` 是 UniApp 中用于创建 Canvas 上下文对象的方法，它允许开发者在页面中绘制图形、文字、图像等内容。此方法通常与 `canvas-id` 配合使用，在 `<canvas>` 标签中指定唯一的 ID，从而操作对应的画布区域。 ### 基本用法 要使用 `uni.createCanvasContext`，首先需要在模板中定义一个 `<canvas>` 元素，并为其设置 `canvas-id` 属性： ```html <template> <view> <canvas :style="{width: canvasW + 'px', height: canvasH + 'px'}" canvas-id="myCanvas"></canvas> </view> </template> ``` 在脚本中，通过 `uni.createCanvasContext('myCanvas', this)` 创建上下文对象，并执行绘图操作： ```javascript <script> export default { data() { return { canvasW: 300, canvasH: 400 }; }, mounted() { const ctx = uni.createCanvasContext('myCanvas', this); // 绘制矩形 ctx.rect(50, 50, 200, 200); ctx.setFillStyle('red'); ctx.fill(); // 绘制文本 ctx.setFontSize(20); ctx.setFillStyle('white'); ctx.fillText('Hello Canvas', 80, 150); // 执行绘制 ctx.draw(); } }; </script> ``` ### 获取图片并绘制到 Canvas 如果需要将远程图片绘制到 Canvas 上，可以先调用 `uni.getImageInfo` 获取图片信息，再使用 `ctx.drawImage` 进行绘制： ```javascript let ctx = uni.createCanvasContext('mini_poster', this); uni.getImageInfo({ src: this.bgShareInvite, success: function(res) { ctx.drawImage(res.path, 0, 0, this.canvasW, this.canvasH); ctx.draw(); }.bind(this) }); ``` ### 导出 Canvas 内容为临时路径 完成绘制后，可以通过 `uni.canvasToTempFilePath` 方法将 Canvas 的内容导出为图片路径，以便后续使用或分享： ```javascript uni.canvasToTempFilePath({ canvasId: 'myCanvas', success: function(tempFilePathData) { console.log('Canvas 图片路径:', tempFilePathData.tempFilePath); }, fail: function(err) { console.error('导出 Canvas 失败:', err); } }, this); ``` ### 注意事项 - 在非 H5 平台（如小程序）中，Canvas 的宽高应以像素为单位，且不能使用百分比。 - `canvas-id` 必须与 `uni.createCanvasContext` 中的参数一致。 - 每次调用 `ctx.draw()` 会清空之前的绘制状态，如需保留，可使用 `ctx.draw(true)`。 - 使用 `this` 参数是为了确保在组件内部正确引用当前上下文[^1]。 ### 示例代码结构 以下是一个完整的示例，展示如何加载图片并绘制到 Canvas 上： ```html <template> <view> <canvas canvas-id="posterCanvas" :style="{ width: canvasW + 'px', height: canvasH + 'px' }"></canvas> <button @click="generatePoster">生成海报</button> </view> </template> <script> export default { data() { return { canvasW: 300, canvasH: 400, bgShareInvite: 'https://example.com/image.jpg' }; }, methods: { async generatePoster() { let ctx = uni.createCanvasContext('posterCanvas', this); let info = await uni.getImageInfo({ src: this.bgShareInvite }); // 绘制背景图 ctx.drawImage(info[1].path, 0, 0, this.canvasW, this.canvasH); // 添加文字水印 ctx.setFontSize(24); ctx.setFillStyle('white'); ctx.fillText('Sample Poster', 50, 50); // 提交绘制 ctx.draw(); // 导出为临时路径 uni.canvasToTempFilePath({ canvasId: 'posterCanvas', success: (res) => { console.log('生成成功:', res.tempFilePath); } }, this); } } }; </script> ``` ---