微信小程序画布
1. 小程序画布是白底为什么保存图片后变成了黑底
应该是因为图片为png格式,将格式修改为jpg格式看看。
2. 微信小程序canvas怎么监听canvas画为空
1.canvas标签默认宽度来300px、高度225px
2.同一页面自中的canvas-id不可重复,如果使用一个已经出现过的canvas-id,该canvas标签对应的画布将被隐藏并不再正常工作
示例代码:下载
?
1
2
3
4
5
6
7
<!-- canvas.wxml -->
<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas"></canvas>
<!-- 当使用绝对定位时,文档流后边的canvas的显示层级高于前边的canvas-->
<canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas"></canvas>
<!-- 因为canvas-id与前一个canvas重复,该canvas不会显示,并会发送一个错误事件到AppService -->
<canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas" binderror="canvasIdErrorCallback"></canvas>
// canvas.js
3. 微信小程序画布 如何撤回当前画错的这一笔
这样抄子重画袭的话太慢了吧。看下这个博客http://blog.csdn.net/L_junpeng/article/details/79445662
4. 微信小程序能用canvas吗
微信小程序里的canvas 非 h5 canvas有很多不一样的地方,以下把微信小程序的canvas叫做
下面全是我一点点测试出的干货,耐心看:
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); }});
5. 微信小程序在canvas 画布上划动,如何阻止页面上下动
可以重新打开这个小程序设置。
6. 微信小程序中利用canvas 2d绘制的海报,获取图片临时地址第一次报错,第二次又没问题了,请问怎么解决啊
微信小程序中利用绘制的海报获取图片,临时地址,第一次报错可进行下一次更正。
7. 微信小程序的canvas画布功能怎么用
微信小程序中有一个功能是canvas画布功能,那么这个功能该怎么用呢?下面的教程就是关于微信小程序的canvas画布功能怎么用的,一起来看看吧。
微信小程序中有一个功能是canvas画布功能,那么这个功能该怎么用呢?下面的教程就是关于微信小程序的canvas画布功能怎么用的,一起来看看吧。
canvas画布,你可以理解为有一张白布,你可以在画布上画出不同形状、颜色、粗细的图形。
8. 小程序 canvas 怎么改柱状图的颜色
jmGraph 支持小程序的canvas库
https://github.com/jiamao/jmgraph
可以试下这个库,每个方块都可以做成一个对象,像操作dom一样。
9. 微信小程序canvas能画折线图吗
应该是可以滴