微信小程序适配canvas大小位置居中

个人经验总结 专栏收录该内容
8 篇文章 0 订阅

canvas适配微信小程序居中绘制

在这里插入图片描述
通过微信wx.getSystemInfo获取屏幕宽度进行对canvas绘制,参考了https://blog.csdn.net/qq_33529011/article/details/80915414进行制作

js部分:

 onReady: function () {
        //微信获取屏幕函数
        wx.getSystemInfo({
          success: function(res) {
            //正方形宽高比一样
            let annulusHeight = Math.round(res.screenWidth * 0.68) //0.68canva占地比
            console.log(annulusHeight)
          }
        })
      },

html部分

<canvas style="width: {{annulusHeight}}px; height: {{annulusHeight}}px" class="bgCanvas" canvas-id="bgCanvas"></canvas>

进行了简单的封装可以方便调用

参数类型是对象,分别是文字内容,大小,颜色,x轴,y轴位置,最后一个是canvas模板时画板的大小

font2: function (tscxyr){
    let annulusHeight = this.data.annulusHeight;
    let { text, size, color, x, y, screen } = tscxyr;
    ctx.font = `${Math.round(annulusHeight * size / screen)}px bold 黑体`;
    ctx.fillStyle = color;
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText(`${text}`, `${Math.round(annulusHeight * x / screen)}`, `${Math.round(annulusHeight * y / screen)}`);
  },

下面是全部代码有需要的小伙伴可以参考一下(还未封装)

// pages/index2/index2.js
const ctx = wx.createCanvasContext("bgCanvas")
Page({

  /**
   * 页面的初始数据
   */
  data: {
    annulusHeight: 0,
    brAnnulus: 92,
    bedState: '在床',  
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    let that = this;
    //微信获取屏幕函数
    wx.getSystemInfo({
      success: function(res) {
        //正方形宽高比一样
        let annulusHeight = Math.round(res.screenWidth * 0.68) //0.68canva占地比
        console.log(annulusHeight)

        // 文字部分18号
        ctx.font = `${Math.round(annulusHeight * 0.082569)}px bold 黑体`;
        // 设置颜色
        ctx.fillStyle = "white";
        // 设置水平对齐方式
        ctx.textAlign = "center";
        // 设置垂直对齐方式
        ctx.textBaseline = "middle";
        // 绘制文字(参数:要写的字,x坐标,y坐标)
        ctx.fillText("实施心率", `${Math.round(annulusHeight * 0.4954)}`, `${Math.round(annulusHeight * 0.22936)}`);
      
        that.setData({
          annulusHeight: annulusHeight
        })
      }
    })
    this.font();
    this.annulus();
  },

  annulus: function () {
    let brAnnulus = this.data.brAnnulus;
    let annulusHeight = this.data.annulusHeight;
    let circleCenter = annulusHeight / 2;
    let circleR = circleCenter * 0.9;

    brAnnulus = (brAnnulus / 150) * 2 * Math.PI;
    //圆环
    ctx.setLineWidth(16)
    ctx.arc(circleCenter, circleCenter, circleR, 0, 2 * Math.PI);
    ctx.setStrokeStyle('white')
    ctx.stroke()

    ctx.beginPath()
    ctx.setLineCap('round')
    ctx.setLineWidth(10)
    ctx.arc(circleCenter, circleCenter, circleR, 0, brAnnulus, false)
    ctx.setStrokeStyle('green')
    ctx.stroke()
    ctx.draw()
  },

  font: function() {
    let annulusHeight = this.data.annulusHeight;
    let brAnnulus = this.data.brAnnulus;
    let f108 = Math.round(annulusHeight * 0.4954);
    let bedState = this.data.bedState;

    ctx.font = `${Math.round(annulusHeight * 0.2752)}px bold 黑体`;
    ctx.fillStyle = "#c2c6e9";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText(`${brAnnulus}`, `${f108}`, `${Math.round(annulusHeight * 0.4587)}`);

    ctx.font = `${Math.round(annulusHeight * 0.1)}px bold 黑体`;
    ctx.fillStyle = "#08c87d";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText(`${bedState}`, `${f108}`, `${Math.round(annulusHeight * 0.688)}`);
  }
})
  • 0
    点赞
  • 0
    评论
  • 4
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值