您现在的位置是：网站首页> 编程资料编程资料

详解html5 canvas 微信海报分享（个人爬坑）

2021-08-31 969人已围观

简介 这篇文章主要介绍了详解html5 canvas 微信海报分享（个人爬坑）的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

本文介绍了canvas 微信海报分享，分享给大家，具体如下：

  1. 随机产生一张图片
  2. 拿到微信用户的头像和称呢（自己调后端的接口获取）
  3. 把用户头像和称呢和随机产生一张图片合成一张海报
  4. 可能上一页用户还有填入的心愿文本也要填入图片中

实现效果图

记录下在实现功能过程中遇到的问题

  1. canvas在微信浏览器中长按无效不能像img一样长按分享（那我就转成img呗）
  2. 转成img后在微信开发者工具中能显示，真机无效（欲哭无泪），度娘说可能是图片跨域^-^
  3. 用户头像合成还要圆角，我表示不会啊，直接看canvas api文档了对度娘无爱了
  4. canvas填入文字超过指定宽度也要换行，我表示只知道不超多指定宽度的各种文字对齐方式 ctx.textAlign = 'center' ;
  5. canvas在高清屏下模糊的问题（超简单的不知道度娘怎么会那么

上一篇：利用三角函数在canvas上画虚线的方法html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法

下一篇：详解html5页面 rem 布局适配方法Html5移动端网页端适配(js+rem)html5中JavaScript removeChild 删除所有节点HTML5中 rem适配方案与 viewport 适配问题详解

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网