canvas教程

小程序答疑:跳坑《一百一十一》canvas学习及使用说明(2)

字号+ 作者:H5之家 来源:H5之家 2017-10-05 15:37 我要评论( )

context.clearRect(0, 0, 320, 320)[/size][size=18px] wx.drawCanvas({[/size][size=18px]canvasId: 1,[/size][size=18px]actions: context.getActions()[/size][size=18px] }) 2、wx.canvasToTempFilePath()的写

context.clearRect(0, 0, 320, 320)[/size] [size=18px] wx.drawCanvas({[/size] [size=18px] canvasId: 1,[/size] [size=18px] actions: context.getActions()[/size] [size=18px] })



2、wx.canvasToTempFilePath()的写法注意点就可以了:

wx.canvasToTempFilePath({ canvasId: 1, success: function (res) { console.log(res); }, fail: function (res) { console.log(res); } });


这样写在真机的控制台上是可以看到返回的对象的,也就是生成的图片途径


相关讨论七:
wx.canvasToTempFilePath无效
之前的版本wx.canvasToTempFilePath是有效的,但是更新了最新版本这个方法就不起作用了,打了log之后,success,fail,complete都没进去

手机上可以成功,但是开发者工具是有问题的,另外bindtouchmove在开发者工具可以执行绑定函数,但在手机上就没有执行函数



手机上试了已经成功这是代码

wx.canvasToTempFilePath({ canvasId: canvas, success: function success(res) { var localImage = res.tempFilePath console.log(localImage) ...//此处做上传处理 }, complete: function complete(e) { console.log(e); }, fail: function(res){ console.log(res); } })



相关问题八:
如何获取canvas的尺寸(高度和宽度)我要在canvas上画坐标,但是如何获取canvas的尺寸(高度和宽度)呢?

canvas的尺寸是可以设置的啊,参见canvas文档。



相关问题九:
scroll-view嵌套canvas的问题
现在好像scroll-view可以嵌套canvas了,但是在开发者工具中滑动是没问题的,在真机上滑动就会卡顿了

目前还不支持scroll-view嵌套canvas,canvas不会随着scroll-view滚动


相关讨论十:
canvas和canvas之间的层级问题
canvas和canvas之间的层级可以设置吗?页面上如果有两个canvas,那么他们层级是怎么区分谁高谁低呢?
答:Can 官方

根据文档流,在后边的canvas 层级比较高







网友给出的解决方案1:

被@了 就赶紧露个脸 哈哈
问题:
用canvas画线条怎么保证在不同手机上线条程度一样啊?

我是这样写的:

const ctx = wx.createCanvasContext(myCanvas)

ctx.moveTo(45,10)

ctx.lineTo(290, 10)

但是不同手机上长度不同


答:

动态计算坐标 ,有一个wx.getSystemInfo的方法可以获取窗口的宽度,页面初始化的时候保存下来,调用就好了


网友给出的解决方案2:


被@了 就赶紧露个脸 哈哈
问题:
用canvas画线条怎么保证在不同手机上线条程度一样啊?


楼层被无情征用
新增案例:
fillText(text,x,y)方法的y不是左上角位置
我试了 fillText(text,x,0), y设为 0,文字隐藏到边界以上了,android 真机,开发者工具,都试了是一样的问题

其实是在文字的7/8的位子,每次下移7/8*fontsize就可以显示在0的位置了

哦,应该是的,这是 bug 吗?以后会修复吗?我怎么记得好像android 原生的 drawText 的 y也是默认非左上角位置

非也,android原生下移3/4


网友给出的解决方案3:

新增讨论:canvas销毁问题
想问一下,怎么把创建的canvas销毁掉,而不是清除画布的内容?
答:Can 官方

wx:if



网友给出的解决方案4:

新增案例:群内成员

问题:
各位 有看过这类小程序吗?


他的折线行情图怎么实现的,我没打开小程序的时段也有数据
canvas画图怎么获取没打开小程序时的数据呢,是有专门的api吗?
先是 接口接收 打开小程序之前的所有数据,再实时获取数据画图吗?

他不是每秒钟都在画的………… 而是 你打开的那一瞬间,他根据之前的数据在画


之前的数据接口 和 实时数据接口 不同的是吧

打开小程序,先查看缓存有没有今天的数据,有则先画前面的部分,再查询获取后面的部分,画出来,并缓存

这个要看实际情况的,也很有可能是你关闭的时候,保存了结束时间,再次登录,提交结束时间,实时反馈,从你结束的那段时间到现在的所有数据!
一切,取决于你访问的网站,或者你的后台,或者...的请求规则!



新增案例:
Canvas的drawImage的BUG

环境:android 7.0

微信版本:6.5.7

图1中图片位置是一个200*200的canvas,图片通过wx.drawImage绘制,背景黑色半透明蒙层是绝对定位。

在蒙层上上下滑动时,就会如图2所示,图片脱离canvas随蒙层后面的内容一起滚动。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评
d