首页 / CANVAS / 微信小程序 —— canvas生成海报图与分享

微信小程序 —— canvas生成海报图与分享

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了微信小程序 —— canvas生成海报图与分享，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9199字，纯文字阅读大概需要14分钟。

内容图文

整体思路

获取手机屏幕大小去依据设计尺寸比例调整
赋值图片路径
canvas生产图片（要注意顺序）
获取用户相册权限
保存相册

效果图

微信小程序 —— canvas生成海报图与分享 - 文章图片

代码示例

wxml

<view style="position: absolute;bottom: 0;left: 0;color:#000;z-index:99999">
  坐标: ({{x*2}}, {{y*2}})
</view>

<block wx:if="{{canvasType}}">
  <!-- style="background-image: url(/images/poster_Chinese.png);    background-size: cover;" -->
  <canvas class="canvas" canvas-id="shareCanvas" bindtouchstart="start" bindtouchmove="move" bindtouchend="end"></canvas>
</block>


<view class="transpond-box flexCenter" style='flex-direction:column' bindtap="shareBtn">
  <image mode="widthFix" src="/images/icon_oyq.png" style="width:110rpx;height:110rpx;margin-bottom:16rpx;"></image>
  <view>保存图片分享</view>
</view>

wxss

page {
  background: #F0F5F8;
}

.canvas {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 2;
  /* top: 0; */
  top: 999999rpx;
  background-color: rgba(0, 0, 0, 0.3);
  transform: scale(0.6);
}

.transpond-box {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 242rpx;
  background: #FFFFFF;
  padding: 14rpx;
}

js

// pages/test1/test1.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    canvasType: false, //canvas是否显示
    name: '四字弟弟',
    subject: 'xx',
    bgImgUrl: 'http://xxx',
    iconUrl: 'http://xxx',
    qrcodeUrl: 'http://xxx',
    x: 0,
    y: 0,
    hidden: true,
    price: 100,
    // canvas 
    canvasWidth: 0,
    canvasHeight: 0,
    loadType: false, //保存图片，分享好友 Btn
    title: 'xxx'
  },
  start: function (e) {
    this.setData({
      hidden: false,
      x: e.touches[0].x,
      y: e.touches[0].y
    })
  },
  move: function (e) {
    this.setData({
      x: e.touches[0].x,
      y: e.touches[0].y
    })
  },
  end: function (e) {
    this.setData({
      hidden: true
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onl oad: function (options) {},

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    wx.onUserCaptureScreen(function (res) {
      console.log('用户截屏了')
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '',
      path: '/page/user'
    }
  },
  /**
   * 开启转发朋友圈
   */
  onShareTimeline(res) {
    return {
      title: '',
      query: "",
      bgImgUrl: ''
    }
  },
  // 保存图片
  shareBtn() {
    this.getSysInfo()
    setTimeout(() => {
      this.btnTap()
    }, 1000)
    console.log("保存")
  },
  /*获取手机宽高*/
  getSysInfo() {
    let that = this
    let bgImgUrl = this.data.bgImgUrl
    let qrcodeUrl = this.data.qrcodeUrl
    let iconUrl = this.data.iconUrl
    wx.getSystemInfo({
      success(res) {
        that.setData({
          canvasWidth: res.windowWidth,
          canvasHeight: res.windowHeight
        })
        // 获取图片信息生成canvas
        that.getImginfo([bgImgUrl, iconUrl, qrcodeUrl], 0);
      }
    })
  },
  // 获取图片信息
  getImginfo: function (urlArr, _type) {
    let that = this;
    //console.log(urlArr, _type, "ssssssssssss")
    wx.getImageInfo({
      src: urlArr[_type], //服务器返回的带参数的小程序码地址
      success: function (res) {
        //res.path是网络图片的本地地址
        if (_type === 0) { //背景图片
          that.setData({
            bgImgUrl: res.path,
          })
          that.getImginfo(urlArr, 1)
        } else if (_type === 1) { //头像图片
          that.setData({
            iconUrl: res.path,
          })
          that.getImginfo(urlArr, 2)
        } else {
          that.setData({ //二维码
            qrcodeUrl: res.path,
            loadType: true,
          })
          // 创建canvas图片
          that.canvasImg();
        }
      },
      fail: function (res) {
        //失败回调
        console.log('错误-res', _type, res)
      }
    });
  },
  // (x,y):圆角矩形起始坐标; width: 矩形宽度; height: 矩形高度; r: 矩形圆角; bgcolor: 矩形填充颜色; lineColor: 矩形边框颜色;
  draw(ctx, x, y, width, height, r, bgcolor, lineColor) {
    ctx.beginPath();
    ctx.moveTo(x + r, y);
    ctx.lineTo(x + width - r, y);
    ctx.arc(x + width - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
    ctx.lineTo(x + width, y + height - r);
    ctx.arc(x + width - r, y + height - r, r, 0, Math.PI * 0.5);
    ctx.lineTo(x + r, y + height);
    ctx.arc(x + r, y + height - r, r, Math.PI * 0.5, Math.PI);
    ctx.lineTo(x, y + r);
    ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
    ctx.fillStyle = bgcolor;
    ctx.strokeStyle = lineColor;
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
  },
  // 生成图片  绘制canvas
  canvasImg() {
    let that = this;
    wx.showLoading({
      title: '图片正在生成'
    });
    that.setData({
      canvasType: true
    });
    // 表头 40+88 =128
    var header = 128;
    var x = this.data.canvasWidth / 750; //设置相对canvas自适应根元素大小
    console.log(x, "000000000000000")
    const ctx = wx.createCanvasContext('shareCanvas');
    ctx.drawImage(this.data.bgImgUrl, 0, 0, 750 * x, (1334 - header) * x);

    // ctx.setTextAlign('center'); // 文字居中
    ctx.beginPath() //注意此处
    //名字
    ctx.setFillStyle('#3C3C3C'); // 文字颜色 // ctx.setFontSize(17); // 文字字号
    ctx.font = 'normal bold 17px sans-serif';
    ctx.fillText(`${this.data.name}`, 272 * x, (790 - header) * x);

    ctx.setFillStyle('#9D9D9D'); // 文字颜色
    ctx.font = 'normal 400 13px sans-serif';
    ctx.fillText(`${this.data.subject}当前级别 ${this.data.price}`, 272 * x, (842 - header) * x);

    ctx.beginPath() //注意此处
    ctx.moveTo(0, 1010 * x);
    ctx.lineTo(750 * x, 1010 * x);
    ctx.strokeStyle = "#F0F5F8";
    ctx.stroke();

    ctx.beginPath() //注意此处
    ctx.setFillStyle('#9D9D9D'); // 文字颜色
    ctx.font = 'normal 400 14px sans-serif';
    ctx.fillText('xx', 87 * x, (1070 - header) * x);

    ctx.setFillStyle('#9D9D9D'); // 文字颜色
    ctx.font = 'normal 400 14px sans-serif';
    ctx.fillText('xx', 335 * x, (1070 - header) * x);

    ctx.setFillStyle('#9D9D9D'); // 文字颜色
    ctx.font = 'normal 400 14px sans-serif';
    ctx.fillText('xx', 609 * x, (1070 - header) * x);

    ctx.setFillStyle('#008CD6'); // 文字颜色
    ctx.font = 'normal 400 14px sans-serif';
    ctx.fillText('xx', 35 * x, (1120 - header) * x);

    ctx.setFillStyle('#9D9D9D'); // 文字颜色
    ctx.font = 'normal 400 17px sans-serif';
    ctx.fillText('/', 230 * x, (1120 - header) * x);

    ctx.setFillStyle('#008CD6'); // 文字颜色
    ctx.font = 'normal 400 14px sans-serif';
    ctx.fillText('xx', 292 * x, (1120 - header) * x);

    ctx.setFillStyle('#9D9D9D'); // 文字颜色
    ctx.font = 'normal 400 17px sans-serif';
    ctx.fillText('/', 495 * x, (1120 - header) * x);

    ctx.beginPath() //注意此处
    ctx.setFillStyle('#008CD6'); // 文字颜色
    ctx.font = 'normal 400 14px sans-serif';
    ctx.fillText('xx', 548 * x, (1120 - header) * x);

    ctx.beginPath() //注意此处
    let textLength = ctx.measureText(this.data.title).width
    // 长度按照文字长度计算 218 * x
    // that.draw(ctx, 498 * x, (848 - header) * x, 218 * x, 43 * x, 5, '#fff', '#008CD6')
    let rectX = (708 * x) - textLength - 5 //476 * x
    that.draw(ctx, rectX, (848 - header) * x, textLength + 10, 43 * x, 5, '#fff', '#008CD6')

    ctx.beginPath() //注意此处
    ctx.setFillStyle('#008CD6'); // 文字颜色
    ctx.font = 'normal 400 14px sans-serif';
    ctx.textAlign = "right";
    ctx.fillText(`${this.data.title}`, 708 * x, (878 - header) * x);
    console.log(ctx.measureText(this.data.title).width, "文字长度！！！")

    ctx.setFillStyle('#3C3C3C'); // 文字颜色
    ctx.font = 'normal bold 35px sans-serif';
    ctx.fillText('xx', 710 * x, (980 - header) * x);

    ctx.beginPath() //注意此处
    //方形二维码框
    ctx.fillStyle = "#fff";
    ctx.fillRect(560 * x, (1144 - header) * x, 160 * x, 160 * x);
    ctx.drawImage(this.data.qrcodeUrl, 570 * x, (1154 - header) * x, 140 * x, 140 * x);
    ctx.closePath() //注意此处

    ctx.beginPath() //注意此处
    //圆形头像框
    ctx.setStrokeStyle('rgba(0,0,0,.1)');
    ctx.arc(150 * x, (778 - header) * x, 90 * x, 0, 2 * Math.PI);
    ctx.fill('#fff');
    //头像
    ctx.clip();
    ctx.drawImage(this.data.iconUrl, 60 * x, (688 - header) * x, 180 * x, 180 * x);
    ctx.closePath() //注意此处

    ctx.save() //状态的保存，-----改变了保存的位置 ctx.restore(); //状态的恢复
    ctx.stroke();
    ctx.draw();
    wx.hideLoading();
  },
  // 授权 getSetting检测用户有没有开启相册权限 有的话直接保存 没有的话弹到权限页面让用户授权
  btnTap: function () {
    let that = this;
    wx.showLoading({
      title: '正在保存',
      mask: true,
    });
    wx.getSetting({
      success(res) {
        if (res.authSetting['scope.writePhotosAlbum']) {
          that.saveImg();
        } else if (res.authSetting['scope.writePhotosAlbum'] === undefined) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success() {
              that.saveImg();
            },
            fail() {
              wx.showToast({
                title: '您没有授权，无法保存到相册',
                icon: 'none'
              })
            }
          })
        } else {
          wx.openSetting({
            success(res) {
              if (res.authSetting['scope.writePhotosAlbum']) {
                that.saveImg();
              } else {
                wx.showToast({
                  title: '您没有授权，无法保存到相册',
                  icon: 'none'
                })
              }
            }
          })
        }
      }
    })
  },
  // 保存图片
  saveImg: function () {
    wx.canvasToTempFilePath({
      canvasId: 'shareCanvas',
      success: function (res) {
        console.log(res)
        wx.hideLoading();
        var tempFilePath = res.tempFilePath;
        wx.saveImageToPhotosAlbum({
          filePath: tempFilePath,
          success(res) {
            wx.showModal({
              content: '海报保存成功，你可以从手机相册中把海报分享到朋友圈',
              showCancel: false,
              confirmText: '好的',
              confirmColor: '#333',
              success: function (res) {
                // wx.showToast({
                //   title: '保存成功',
                //   icon: 'none'
                // });
                if (res.confirm) {
                  var arr = [];
                  arr.push(tempFilePath);
                  //保存后全屏显示
                  wx.previewImage({
                    urls: arr,
                    current: arr
                  });
                }
              },
              fail: function (err) {
                console.log(err);
                if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
                  console.log("用户一开始拒绝了，我们想再次发起授权")
                  alert('打开设置窗口')
                  wx.openSetting({
                    success(settingdata) {
                      console.log(settingdata)
                      if (settingdata.authSetting['scope.writePhotosAlbum']) {
                        console.log('获取权限成功，给出再次点击图片保存到相册的提示。')
                      } else {
                        console.log('获取权限失败，给出不给权限就无法正常使用的提示')
                      }
                    }
                  })
                }
                wx.showToast({
                  title: '弹窗失败',
                  icon: 'none'
                });
              }
            })
          },
          fail: function (res) {
            wx.showToast({
              title: '没有相册权限',
              icon: 'none',
              duration: 2000
            });
          }
        })
      }
    });
  }
})

内容总结

以上是互联网集市为您收集整理的微信小程序 —— canvas生成海报图与分享全部内容，希望文章能够帮你解决微信小程序 —— canvas生成海报图与分享所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/614932.html

来源：【匿名】

【上一篇】wx.getImageInfo和wx.downloadFile下载用户头像报错(小程序canvas以及小程序图片下载部分)【下一篇】基于canvasJS在PHP中制作动态图表详解

更多 ►

【微信小程序 —— canvas生成海报图与分享】教程文章相关的互联网学习教程文章

微信小程序里在canvas里使用base64的图片【代码】

wxml 文件： 113<view wx:if="is_hide_canvas">14<canvas style="width: 320px; height: 400px; left:{{(screenWidth-320)/2}}px;top:20px;" canvas-id="myCanvas"></canvas>15<...

微信小程序Canvas增强组件实例详解及源码分享【图】

这篇文章主要介绍了微信小程序 Canvas增强组件实例详解及源码分享的相关资料,WeZRender是一个微信小程序Canvas增强组件，这里详细介绍，需要的朋友可以参考下WeZRender是一个微信小程序Canvas增强组件，基于HTML5 Canvas类库ZRender。使用WXML：JS：特性数据驱动利用WeZRender绘图，只需定义图形数据。丰富的图形选项内置多种图形元素（圆形、椭圆、圆环、扇形、矩形、多边形、直线、曲线、心形、水滴、玫瑰线、Trochoid、文字、图...

微信小程序canvas开发实例及注意事项

微信小程序 wxcanvas测试手机为IPHONE6,开发者工具版本0.10.102800。开发者工具0.11.112301版本也一样微信小程序里的canvas 非 h5 canvas有很多不一样的地方，以下把微信小程序的canvas叫做wxcanvas下面全是我一点点测试出的干货，耐心看：1.wxcanvas,不像h5canvas那样有width和height属性和width和height的style样式。他只有style样式，可以理解为他就是个框吧；2.wxcanvas不要当成真的H5canvas，就当它是个p就行，画出范围的东西...

微信小程序canvas绘制圆角base64图片的实现

接口返回base64格式小程序二维码，以往的做法是需要再调一个接口去拿到jpg/png格式的图片。如果没有这个接口呢，是不是也可以？然而小程序canvas并不支持直接使用base64绘制，好在小程序的文件系统提供了方法，可以把base64经过进一步处理转成本地图片。获取base64格式图片getXcxQrcode() {wx.request({url: app.globalData.globalUrl + "/get_wx_code",data: {token: app.globalData.weixin_token,scene: app.globalData.page_ke...

微信小程序使用canvas自适应屏幕画海报并保存图片功能

小程序canvas的API并没有像其他的一样支持小程序独有的 rpx 自适应尺寸单位，在绘制内容时所应用的单位仍然是 px，那么如何实现不同尺寸屏幕的自适应呢？我们的在开发中常用的参考屏幕尺寸（iPhone6）为：375*667；那么想要适应其他尺寸的屏幕时只需按照iPhone6的绘制大小按比例进行换算即可：获取系统屏幕尺寸先利用wx.getSystemInfo （获取系统信息）的API获取屏幕宽度，然后除iPhone6的屏幕宽度，即可得到相对单位 // 在onL...

微信小程序如何使用canvas二维码保存至手机相册【图】

前言在使用canvas绘制海报的过程中不建议使用原生来进行画图，因为默认是不支持rpx像素的，px不会做到自适应。推荐使用插件 Paintergithub地址github.com/Kujiale-Mob （本地下载）…配置很简单，也容易上手，无论是画矩形，还是将图片合成canvas；还是自己定义文字；都是很方便的。附上一个简单的例子吧 <painter :customStyle="customStyle" :palette="imgDraw" /> //const _this=this;wx.getSystemInfo({success (res) {_this....

微信小程序简单的canvas裁剪图片功能详解

小程序miniso的一个发布内容截图功能，话不多，先上代码wxml文件：<view class="cut-1-1 t-c {{cutSelect == 1? cut-select:}}" data-cut="1" bindtap="selectCutType">1:1</view> <view class="cut-3-4 t-c {{cutSelect == 2? cut-select:}}" data-cut="2" bindtap="selectCutType">3:4</view> <block wx:for="{{imgList}}" wx:key="{{index}}" ><swiper-item><scroll-view scroll-top="{{topNum}}" scroll-y class="imgFile {{cu...

微信小程序利用Canvas绘制图片和竖排文字详解【图】

前言闲暇时间抽个空写了个三国杀武将手册的小程序，中间有个需求设计的是合成武将皮肤图、竖排的武将姓名、以及小程序码，然后提供保存图片到相册，最终让用户可以分享到朋友圈或其他平台。合成图片应该按照 Canvas 的文档来做都没什么问题，主要是有个竖排文字的需求，这里和大家分享一下。正文首先放一张最终保存到相册的图片吧~自我感觉良好，至少达到了我自己的预期吧~~~下面让我们一步一步来看看如何实现的吧。整个图片分为三...

微信小程序基于canvas渐变实现的彩虹效果示例【图】

本文实例讲述了微信小程序基于canvas渐变实现的彩虹效果。分享给大家供大家参考，具体如下：微信小程序提供了两种渐变的方式： createLinearGradient(x,y,x1,y1)创建一个线性的渐变。 x，y 起点坐标 x1，y1 终点坐标 createCircularGradient(x,y,r)创建一个从圆心开始的渐变。 x，y 圆心坐标 r 半径创建了渐变对象之后，必须添加两个或者两...

微信小程序实现的canvas合成图片功能示例【图】

本文实例讲述了微信小程序实现的canvas合成图片功能。分享给大家供大家参考，具体如下：先要获取图片的信息然后将需要合成的内容用canvas绘制出来，得到一个合成好的画布，接下来用 wx.canvasToTempFilePath 把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。这个时候的路径是微信的临时路径，浏览器是访问不了的，因此需要请求服务器用 wx.uploadFile 将本地资源上传到开发者服务器。在页面的wxml中加入c...

详解微信小程序-canvas绘制文字实现自动换行【图】

在使用微信小程序canvas绘制文字时，时常会遇到这样的问题：因为canvasContext.fillText参数为我们只能设置文本的最大宽度，这就产生一定的了问题。如果我们绘制的文本长度不确定或者我们希望文本超出自动换行或者用省略号表示，光靠这个API是无法完成的。下面本人就讲下我在开发中是如何解决这个问题的。 1 wxml代码 <canvas canvas-id="myCanvas" style="border: 1px solid;"/> 2 wxss代码 canvas {width: 99%;height: 600rpx; }...

微信小程序使用canvas的画图操作示例

本文实例讲述了微信小程序使用canvas的画图操作。分享给大家供大家参考，具体如下：基础写起来太没动力了，也写得乱七八糟的，还是直接解决一些小问题比较方便，代码的方方面面的细节都会详尽的解释一下。 1、下面介绍一下canvas的画图，我这个简单一点，画一个带图文的背景图，图片可以从后台获取也可以选择本地的。canvas画图首先要在wxml里面新建一个<canvas>标签，一定要写上canvas-id=canvas的id，这是必须条件，如下面代码：...

微信小程序canvas.drawImage完全显示图片问题的解决

问题描述问题产生对于微信小程序，canvas处理过程中，dramImage默认图片引用是有残缺的导入初始项目打开链接（原官网例子），浏览器唤醒微信开发这工具，打开连接之前需要下载好微信开发者工具，如已安装则直接唤起，没有则会提示下载目的通过对canvas绘图过程的修改，或者其样式的修改，达到完全显示，并自适应不同机型的目的解决方案准备工作 Page({data:{imgSrc: , // 需要处理图片地址imgW: , // canvas 宽度imgH: , // can...

微信小程序中的canvas 文字断行和省略号显示功能的处理方法【图】

文字的多行处理在dom元素中很好办。但是canvas中没有提供方法，只有通过截取指定字符串来达到目的。那么下面就介绍我自己处理的办法： wxml： <canvas canvas-id=word id=test></canvas>canvas肯定要一个画板容器啦，记得设置宽高哦，小程序中默认宽高是300px和150px js：在page中 //处理文字多出省略号显示dealWords: function (options) {options.ctx.setFontSize(options.fontSize);//设置字体大小var allRow = Math.ceil(opti...

微信小程序canvas拖拽、截图组件功能【图】

先看下微信小程序canvas拖拽功能组件地址 github.com/jasondu/wx-… readme近期补上实现效果如何实现使用canvas使用movable-view标签由于movable-view无法实现旋转，所以选择使用canvas 需要解决的问题如何将多个元素渲染到canvas上如何知道手指在元素上、如果多个元素重叠如何知道哪个元素在最上层如何实现拖拽元素如何缩放、旋转、删除元素看起来挺简单的嘛，就把上面这几个问题解决了，就可以实现功能了；接下来我们一一解决...

CANVAS - 相关标签

canvas动画

CANVAS - 最热教程

javascript – 如何通过z-index对这些c...微信小程序利用Canvas绘制图片和竖排文...微信小程序使用CANVAS绘制图片及图片圆...Canvas跨域的解决方案介绍 javascript – 使用图像创建Canvas元素...Python3 tkinter基础 Canvas create_po...HTML5 Canvas核心技术—图形、动画与游...微信小程序简单的canvas裁剪图片功能详...Vue中使用canvas方法总结关于HTML5Canvas的事件处理

首页 / CANVAS / 微信小程序 —— canvas生成海报图与分享

微信小程序 —— canvas生成海报图与分享

内容导读

内容图文

整体思路

效果图

代码示例

内容总结

内容备注

内容手机端

【微信小程序 —— canvas生成海报图与分享】教程文章相关的互联网学习教程文章

微信小程序里在canvas里使用base64的图片【代码】

微信小程序Canvas增强组件实例详解及源码分享【图】

微信小程序canvas开发实例及注意事项

微信小程序canvas绘制圆角base64图片的实现

微信小程序使用canvas自适应屏幕画海报并保存图片功能

微信小程序如何使用canvas二维码保存至手机相册【图】

微信小程序简单的canvas裁剪图片功能详解

微信小程序利用Canvas绘制图片和竖排文字详解【图】

微信小程序基于canvas渐变实现的彩虹效果示例【图】

微信小程序实现的canvas合成图片功能示例【图】

详解微信小程序-canvas绘制文字实现自动换行【图】

微信小程序使用canvas的画图操作示例

微信小程序canvas.drawImage完全显示图片问题的解决

微信小程序中的canvas 文字断行和省略号显示功能的处理方法【图】

微信小程序canvas拖拽、截图组件功能【图】

CANVAS - 相关标签

程序 - 相关标签

CANVAS - 最新教程

CANVAS - 最热教程