全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[汉中seo公司联系久澳]关于微信小程序canvas的开发

  这篇文章主要介绍了微信小程序 wxcanvas开发实例及注意事项的相关资料,这里对微信canvas与H5中的canvas做对比,并说明注意事项,需要的朋友可以参考下

  微信小程序 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○▪▷◁,就当它是个p就行,画出范围的东西也是存在的,改变width○▼…,height就显示出来了,或者说这里有重绘,但具体如何实现的不知道;

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

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

  5.官方说法:context只是一个记录方法调用的容器★▲△,深圳市小程序制作公司用于生成记录绘制行为的actions数组▪★。context跟<canvas/>不存在对应关系▼•▼,一个context生成画布的绘制动作数组可以应用于多个<▪■;canvas/>▷••。

  实际上,context▲•.getActions()后△◆◇,context中的信息会被清空,23 2020.10 [温州最专业的seo公司哪家好]微信小程序购物商城系统开发所需工具 这篇文章主要介绍了微信小程序购物商城系统开发系列-工具篇的介绍,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。 微信小程序开放公测以来○=◇,一夜之间在各种技术社区。如果想重复利用,需要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事件对象▷•☆=,[汉中seo公司联系久澳]有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);
 }
 })□●;

 

  以上就是本文的全部内容-▽○,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

  相关推荐:

  微信小程序怎么发送模板消息
 

  微信小程序中跳转页面的两种方法
 

  

 

  

 

  以上就是关于微信小程序canvas的开发的详细内容▽△,更多请关注久澳传媒编程栏目其它相关文章!

[汉中seo公司联系久澳]关于微信小程序canvas的开发

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。