收藏
回答

关于微信小程序canvas的各种坑?

[自力更生自给自足的解决了这些问题,遇到同样问题的朋友可以参考参考]


1.用drawImage画线上图片在真机上显示不出来,模拟器上却可以显示(需要说明的是:drawImage画显示图片是需要获取到图片后才能开始画,并且获取的线上图片地址需要是https。)但是这些我都照做了可是真机上还是无法显示,为什么?我也试过下载到本地后画也没有用。

解决方法:

首先 ,我发现用canvas绘制线上图片时,必须先下载到本地,而且线上图片的地址必须是在配置的安全域名下,我遇到绘制不出的原因在于:没有等待图片完全下载好就绘制了,所以这里要考虑绘图顺序,可以用image的bindload事件或者downloadTask.onProgressUpdate来监听图片加载过程。


2.小程序的canvas没有裁剪的api,请问如何用canvas将图片画成圆形?

解决方法:

这个问题我是通过制作一张和头像图片一样大的中间有个圆形镂空(中间透明)的正方形图片绘制在头像上,在视觉上给头像做出圆形的效果。


3.`ctx.drawImage`绘制的画布,使用`ctx.clearRect`清除不了。

解决方法:

这个问题我没有解决。


4.模拟器上有个bug就是在画了图片后再画文字,文字会被覆盖,但是去真机上查看是没有问题的,文字可以正常显示。

解决方法:

这个问题是模拟器的bug。


5.为了让canvas不在页面显示,将canvas用view标签包起来后,给view设置了overflow=hidden和opacity=0的属性,是可以成功将canvas隐藏,但是在真机上测试时,一旦在这个隐藏的canvas上绘制图片,canvas又显示在屏幕上了。模拟器上是不会显示的。

解决方法:

由于canvas是原生的组件所以在模拟器上可以被隐藏,但是在真机上一直置于最上层,所以在真机上canvas一旦被绘制就一定会显示。我想了一个奇怪的方法,我在canvas的外层套了一个宽高正好一屏的view标签,然后将view的背景设置为黑色,再让canvas定位到屏幕的中间。这样看起来像是进入了图片预览。然后短暂延迟后通过 wx.canvasToTempFilePath生成图片后再调wx.previewImage。同时再用wx:if把canvas给销毁,用hidden把view给隐藏,页面每次进入的时候再还原初始值。以上是我根据我自己的需求想的折中办法,有相同情况的同学可以参考。(其实我想实现的最最效果是腾讯投票生成朋友圈二维码的那种,他们的canvas就没有显示在页面上,所以我猜想他们可能是在服务器端进行渲染后再传图给前端的)


6.canvas文字不能换行的问题

解决方法:

这个问题我是通过字符串截取的思路做的,固定每行的字数,为了美观用了ctx.setTextAlign('center')让每行字都水平居中对其。


ps:希望小程序官方能统一回答下这些问题,这几个问题中有些问题一直都有很多人问,可是没有一个好的回答,希望官方能有个好的解答谢谢啦!


最后一次编辑于  2017-08-30
回答关注问题邀请回答
收藏

39 个回答

  • Better Now
    Better Now
    2018-03-23

    canvas能加字体吗?ctx.font="16px bold",16px能正常使用,bold用不了。而且,最骚的是,我要是祛了bold的话16px也失效!

    2018-03-23
    有用
    回复
  • 清风明月
    清风明月
    2018-02-02

    drawImage 这个如何实现图片缩放居中裁切?

    2018-02-02
    有用
    回复
  • 平常心
    平常心
    2018-01-29

    canvas生成分享图片时,由于canvas设置z-index无效,我是设置canvas的样式:position:absolute;top:110vh;  让canvas显示在当前页未滚动的区域


    2018-01-29
    有用
    回复
  • 黄攀
    黄攀
    2018-01-24

    使用canvas画图最后保存到本地的图片中间的文字全都不在了,ios系统确是正常的

    2018-01-24
    有用
    回复
  • Xx丶
    Xx丶
    2018-01-24

    感谢楼上的回答

    2018-01-24
    有用
    回复
  • 努努力中秋吃湾湾的月饼和凤梨酥
    努努力中秋吃湾湾的月饼和凤梨酥
    2018-01-23

    手动艾特楼上。建议做个遮罩层挡住canvas,然后让他画图。这个以前 我遇到了,不得已的办法。只能弹出框的时候再显示canvas并且画图。

    2018-01-23
    有用
    回复
  • Xx丶
    Xx丶
    2018-01-23

    canvas隐藏不行啊,一旦隐藏就无法渲染出正常图片,使用hidden和display:none都不行,难过

    2018-01-23
    有用
    回复
  • log琥珀
    log琥珀
    2018-01-15

    @ekse 这个文档中倒是说的明白,只是还有一丝丝幻想,总想着是不是有什么hack可以用,目前考虑用cover-view做遮罩

    2018-01-15
    有用
    回复
  • 张宁
    张宁
    2018-01-12

    我现在遇到个大坑,深不见底啊,canvas画了很多的元素,上下左右移动,放大缩小都要重新draw一次,卡的不要不要的,这性能问题怎么破啊到底?

    2018-01-12
    有用
    回复
  • 秋之仲夏
    秋之仲夏
    2018-01-09

    貌似这样 设置就ok了

    x 必须等于 150

    而且setTextAlign('center', 150 ,y) 必须根在fillText 下面写 // 样式设置

    context.stroke()  

    context.setFontSize(16);

    context.setFillStyle("#ffffff");

    context.fillText(this.data.username, 150, y )

    context.setTextAlign('center')


    2018-01-09
    有用
    回复

正在加载...

登录 后发表内容