微信小程序 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

8.

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 PHP版本要求一览_Laravel各版本环境要求对照  Android使用GridView实现日历的简单功能  Windows10电脑怎么设置虚拟光驱_Win10右键装载ISO镜像文件  香港服务器网站搭建教程-电商部署、配置优化与安全稳定指南  php静态变量怎么调试_php静态变量作用域调试技巧【解答】  php在windows下怎么调试_phpwindows环境调试操作说明【操作】  如何用低价快速搭建高质量网站？  b2c电商网站制作流程,b2c水平综合的电商平台？  🚀拖拽式CMS建站能否实现高效与个性化并存？  如何在Windows虚拟主机上快速搭建网站？  免费制作统计图的网站有哪些,如何看待现如今年轻人买房难的情况？  Laravel软删除怎么实现_Laravel Eloquent SoftDeletes功能使用教程  长沙做网站要多少钱,长沙国安网络怎么样？  如何在云服务器上快速搭建个人网站？  手机钓鱼网站怎么制作视频,怎样拦截钓鱼网站。怎么办？  Laravel如何从数据库删除数据_Laravel destroy和delete方法区别  Laravel怎么集成Log日志记录_Laravel单文件与每日日志配置及自定义通道【详解】  javascript日期怎么处理_如何格式化输出  Android GridView 滑动条设置一直显示状态(推荐)  高端建站三要素：定制模板、企业官网与响应式设计优化  html5audio标签播放结束怎么触发事件_onended回调方法【教程】  Laravel怎么调用外部API_Laravel Http Client客户端使用  谷歌Google入口永久地址_Google搜索引擎官网首页永久入口  nodejs redis 发布订阅机制封装实现方法及实例代码  如何用PHP快速搭建高效网站？分步指南  微信小程序 input输入框控件详解及实例（多种示例）  如何在企业微信快速生成手机电脑官网？  Laravel如何实现数据导出到CSV文件_Laravel原生流式输出大数据量CSV【方案】  如何在HTML表单中获取用户输入并结合JavaScript动态控制复利计算循环  Laravel如何实现用户密码重置功能？（完整流程代码）  如何在云主机上快速搭建多站点网站？  活动邀请函制作网站有哪些,活动邀请函文案？  如何做网站制作流程,*游戏网站怎么搭建？  香港服务器网站卡顿？如何解决网络延迟与负载问题？  Laravel Octane如何提升性能_使用Laravel Octane加速你的应用  如何用狗爹虚拟主机快速搭建网站？  Win11怎么关闭透明效果_Windows11辅助功能视觉效果设置  原生JS获取元素集合的子元素宽度实例  Java遍历集合的三种方式  javascript中对象的定义、使用以及对象和原型链操作小结  Laravel怎么实现前端Toast弹窗提示_Laravel Session闪存数据Flash传递给前端【方法】  详解vue.js组件化开发实践  如何快速搭建FTP站点实现文件共享？  Laravel如何配置和使用队列处理异步任务_Laravel队列驱动与任务分发实例  Win10如何卸载预装Edge扩展_Win10卸载Edge扩展教程【方法】  如何使用 jQuery 正确渲染 Instagram 风格的标签列表  javascript中数组（Array)对象和字符串（String)对象的常用方法总结  如何自定义safari浏览器工具栏？个性化设置safari浏览器界面教程【技巧】