微信小程序绘制canvas

多潘立童

于 2024-06-18 17:38:06 发布

阅读量142

点赞数 3

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/weixin_42710827/article/details/139779483

版权

result.wxml

<canvas
  type="2d"
  id="canvas"
  style='height:{{canvasH}}px; width:{{canvasW}}px'
></canvas>

result.js

Page({
    data:{
        canvasH: 0,
        canvasW: 0,
    },
    getInfo(){
         let canvasImgSrc = '完整图片地址（背景图）';
            wx.getSystemInfo({ //获取设备信息
              success: res => {
                let {
                  windowHeight,
                  windowWidth
                } = res; //设备宽高
                wx.getImageInfo({ //获取图片信息
                  src: canvasImgSrc, //服务器上图片
                  success: res => {
                    let {
                      width,
                      height
                    } = res; //原图片宽高
                    this.setData({
                      //预览框高是图高，图高是图片原高*(设备宽/图片原宽)的90%
                      imgH: height * windowWidth / width * 0.88,
                      imgW: windowWidth * 0.88, //预览区宽即设备视口宽的90% 
                      canvasH: height, //canvas高为原图高
                      canvasW: width, //canvas宽为原图宽
                    })
                    // 绘制画布----------------------------------------------start
                    this.position = {
                      x: 150,
                      y: 150,
                      vx: 2,
                      vy: 2
                    }
                    this.x = -100
                    wx.createSelectorQuery()
                      .select('#canvas')
                      .fields({
                        node: true,
                        size: true,
                      })
                      .exec((res) => {
                        const width = res[0].width
                        const height = res[0].height

                        canvas = res[0].node
                        const ctx = canvas.getContext('2d')

                        const dpr = wx.getSystemInfoSync().pixelRatio
                        canvas.width = width * dpr
                        canvas.height = height * dpr
                        ctx.scale(dpr, dpr)

                        const img = canvas.createImage()
                        img.onload = () => {
                          this._img = img
                        }
                        img.src = canvasImgSrc
                        const avatar_img = canvas.createImage()
                        avatar_img.onload = () => {
                          this._img_avatar = avatar_img
                        }
                        avatar_img.src = this.data.dat.avatar_url
                        console.log(this.data.dat.avatar_url)

                        setTimeout(() => {
                          if (!this._img) return
                          ctx.drawImage(this._img, 0, 0, width, height)
                          ctx.save() //保存当前的绘图上下文。
                          ctx.beginPath() //开始创建一个路径
                          //画一个圆形裁剪区域
                          ctx.arc(385, 335, 95, 0, 2 * Math.PI, false)
                          ctx.clip() //裁剪
                          //头像
                          ctx.drawImage(this._img_avatar, 290, 240, 190, 190);
                          ctx.restore() //恢复之前保存的绘图上下文
                          ctx.font = '28px Arial'
                          ctx.fillStyle = '#474747'
                          //昵称
                          ctx.fillText(nick_name, 375 - (ctx.measureText(nick_name).width / 2), 480);
                          ctx.fillStyle = '#000'
                          ctx.font = '35px Arial'
                          ctx.fillText(stage_name + group_name + '单词', 85, 220)
                          ctx.font = '46px Arial'
                          ctx.fillText('坚持学习' + (punch_days ? punch_days : 1) + '天', 250, 580)
                          if (type == 5) { //长难句
                            let text = '长难句已学 ' + sentence_number + ' 句'
                            ctx.fillStyle = '#474747'
                            ctx.font = '36px Arial'
                            let measuredWidth = ctx.measureText(text).width;
                            ctx.fillText(text, 375 - (measuredWidth / 2), 835)
                          } else { //词汇
                            ctx.font = '55px Arial'
                            ctx.fillText(true_rate, 125, 885)
                            ctx.fillText(class_true_rate, 430, 885)
                          }
                        }, 500)
                      })
                    // 绘制画布----------------------------------------------end

                  }
                })
              }
            })}
})