微信小程序中canvas的示例分析-创新互联

小编给大家分享一下微信小程序中canvas的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

站在用户的角度思考问题,与客户深入沟通,找到海门网站设计与海门网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:网站制作、成都做网站、企业官网、英文网站、手机端网站、网站推广、域名申请网站空间、企业邮箱。业务覆盖海门地区。

微信小程序 wxcanvas

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

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

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

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

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

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

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

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

实际上,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.《重点》

注意,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);
       }
      });

以上是“微信小程序中canvas的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


新闻标题:微信小程序中canvas的示例分析-创新互联
本文URL:http://pwwzsj.com/article/dppede.html