微信小程序 canvas开发实例及注意事项_网络技术

微信小程序 canvas开发实例及注意事项

发布时间 - 2026-01-10 21:50:22 点击率：次

微信小程序 wxcanvas

测试手机为IPHONE6,开发者工具版本0.10.102800。开发者工具0.11.112301版本也一样

微信小程序里的canvas 非 h5 canvas有很多不一样的地方，以下把微信小程序的canvas叫做wxcanvas

下面全是我一点点测试出的干货，耐心看：

1.wxcanvas,不像h5canvas那样有width和height属性和width和height的style样式。他只有style样式，可以理解为他就是个框吧；

2.wxcanvas不要当成真的H5canvas，就当它是个div就行，画出范围的东西也是存在的，改变width,height就显示出来了，或者说这里有重绘，但具体如何实现的不知道；

3.改变wxcanvas的style的width,height，并不改为原画布上的东西的大小；

4.css transform变换中的变大缩小也无法改变原画布上的东西大小

5.官方说法：context只是一个记录方法调用的容器，用于生成记录绘制行为的actions数组。context跟<canvas/>不存在对应关系，一个context生成画布的绘制动作数组可以应用于多个<canvas/>。

实际上，context.getActions()后，context中的信息会被清空，如果想重复利用，需要var temp=context.getActions()将操作数组保存下来，才可重复用于wx.drawcanvas；

6.注意

wx.drawCanvas({
　　canvasId: 'target',
　　actions: context.getActions()
});

默认会清空画布，想不清空需要

wx.drawCanvas({
  canvasId: 'target',
  actions: context.getActions(),
  reserve:true
});

7.《重点》

<canvas disable-scroll="true" catchtouchmove="ccvsMove" bindtouchmove="cvsMove" canvas-id="target" id="target" style='width:{{width}}px;height:{{height}}px'></canvas>

注意，disable-scroll="true"和bindtouchmove="cvsMove"同时存在时才能避免页面跟着动，catchtouchmove是不行的

上面的写法，ccvsMove和cvsMove会都触发，

ccvsMove返回的是普通touch事件对象，有pageX,clientX等，

cvsMove返回的是canvasTouch事件对象，没有pageX,clientX,只有x,y

wx.drawCanvas({
  canvasId: 'target',
  actions: [],
  reserve:false
});

可以清空画布和画布的状态

9.画布的scale tranlate rotate等状态，在reserve:true时会接着上次的状态

10. context.getActions()返回的数组很有用，打印出来你会发现里面的内容你都能看懂，可以直接修改数组改变画的动作

11.wx.drawCanvas时context.drawImage在手机上可以画出来，在电脑开发工具上画不出来

12.wx.canvasToTempFilePath

官方文档中只有一行，原来

wx.canvasToTempFilePath参数为一个对象包括canvasID,success,fail,complete，和wx.saveFile差不多；

      wx.canvasToTempFilePath({
       canvasId: 'target',
       success: function success(res) {
        wx.saveFile({
         tempFilePath: res.tempFilePath,
         success: function success(res) {
          console.log('saved::' + res.savedFilePath);
         },
         complete: function fail(e) {
          console.log(e.errMsg);
         }
        });
       },
       complete: function complete(e) {
        console.log(e.errMsg);
       }
      });

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

# 微信小程序 # wxcanvas # 小程序 # 微信 # canvas # 微信小程序基于canvas渐变实现的彩虹效果示例 # 微信小程序实现的canvas合成图片功能示例 # 微信小程序使用canvas的画图操作示例 # 微信小程序canvas.drawImage完全显示图片问题的解决 # 微信小程序canvas写字板效果及实例 # 微信小程序简单的canvas裁剪图片功能详解 # 清空 # 的是 # 画出 # 多个 # 有很多 # 我一 # 它是 # 就行 # 为他 # 希望能 # 不像 # 不存在 # 可以直接 # 你都 # 应用于 # 或者说 # 只是一个 # 谢谢大家 # 才可 # 就当

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：如何彻底卸载建站之星软件？

下一篇：Laravel如何使用Livewire构建动态组件？（入门代

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：如何彻底卸载建站之星软件？

下一篇：Laravel如何使用Livewire构建动态组件？（入门代