小程序canvas绘制图形心得!

啊啊啊,快要疯了我,写了很长的文章,被我弄没了!!!!没关系,我重新写

众所周知canvas这个标签很难伺候,不管是原生也好,其他开发也好,尤其是小程序开发,基本上每个小程序都会使用到它的,本人深有体会!

canvas标签

canvas标签爷爷不疼奶奶不爱的,给谁谁不要(标签),怎么整都不行,最后没办法,给它扔一边去吧!
脱离文档流
.canvas {
          width: 100%;
          position: fixed;
          left: 1000px;
          top: 0;
          z-index: -900;
          background: #fff;
         }

size 使用单位

自己定义了必须用px,让你写的地方都没有,自带属性,谁不服!

绘制问题 如图(下)

小程序canvas绘制图形心得!

文字绘制不会换行 :文字自己不会换行,你不能让它半死不拉活的待着吧,利用小程序获取
屏幕的宽度,再根据measureText计算换行,可以单独class写个方法

给绘制文字空间 :计算出文字有多少行(不定,如图红色文字)然后根据设计图或是自己定
义每行的高度,计算出文字的空间

给绘制图片 :揪心啊!!开发工具上,不管是本地图片,网络图片都可以照常绘制出的,
但是到了真机上废了,用过wx.downloadFile也许对我有偏见不好使,wx.getImageInfo这个可以
哎编不下去了(状态模式)

利用wx.canvasToTempFilePath生成图片链接

wx.previewImage 预览图片自带扫码功能哦

最后如果还是画不出来的,可以延长draw和第4步骤的时间运行,不写了都忘了,
篇写的好好的,说没就没了,哪位大神如果看见了一定要告诉我,菜鸟一枚,不喜勿喷!!!!嘎嘎

相关推荐