微信小程序使用canvas绘图,圆形头像,网络背景图,文字,虚线,直线

本文介绍了如何在微信小程序中利用canvas进行图形绘制,包括创建圆形头像、添加网络背景图以及展示文字和线条。通过canvas的API实现复杂图形和内容的组合,为前端开发提供了更多可能。
摘要由CSDN通过智能技术生成
<canvas type="2d" id="shareCanvas0" style="height: 1196rpx;width:578rpx;position: fixed;z-index: -100; left: -99999rpx"></canvas>
//绘图
getCanvas(index){
  var self=this;
  console.log('绘图')
  const query = wx.createSelectorQuery();
  query.select("#shareCanvas0")
      .fields({
        node: true,
        size: false
      }).exec((res) => {
    const canvas = res[0].node;
    const ctx = canvas.getContext('2d');
    canvas.width = 1144;
    canvas.height = 2392;
    self.setData({
      drawing: true,
    })
    new Promise(function (resolve) {

      // 绘制背景图片
      wx.getImageInfo({
        src: self.data.posterBg, //网络图片
        success(res) {
          const img = canvas.createImage();
          img.src = res.path;
          img.onload = () => {
            ctx.drawImage(img, 0, 0, 1144, 2392);
            resolve(true);
          }
        }
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值