小程序canvas 2d 自定义字体

开发工具：微信开发者工具 Stable 1.05.21020210

注意：目前canvas 2d 开发工具看不到效果，需要真机预览才可以看到效果

效果图：

下面是动态加载网络字体的api:

写的是一个全局加载的

// app.js
App({
  onLaunch() {
  

    //加载全局字体
    for(let i =0;i<this.globalData.array.length;i++){
      console.log(i)
      let obj = this.globalData.array[i];
      wx.loadFontFace({
        global:true,
        scopes: ['webview', 'native'],
        family: `${obj.family}`,
        source:`url("${obj.url}")`,
     
        success(res) {
          console.log(res.status)
        },
        fail: function(res) {
          console.log(obj)
          console.log(res)
        },
        complete: function(res) {
          console.log(res.status)
        }
      });
    }


  },
  globalData: {
    userInfo: null,
    array:[
      {
      family:'DINMedium',
      url:'https://qiniu-app.qtshe.com/DIN%20Medium.ttf'
    },
    {
      family:'HYZhengYuan-95W',
      url:'https://dn-qtshe.qbox.me/HYZhengYuan-95W.ttf'
    },{
      family:'Helvetica',
      url:'https://eatmain.oss-cn-hangzhou.aliyuncs.com/weixin/Helvetica%20Condensed%20Bold.ttf'
    },{
      family:'pONk1hggFNmwvXALyH6irIP5',
      url:'https://fonts.gstatic.com/s/condiment/v8/pONk1hggFNmwvXALyH6irIP5.woff2'
    },{
      family:'fC1mPYtObGbfyQznIaQzPQi8UAjA',
      url:'https://fonts.gstatic.font.im/s/hanaleifill/v9/fC1mPYtObGbfyQznIaQzPQi8UAjA.woff2'
    },{
      family:'acf9XsUhgp1k2j79ATk2cw',
      url:'http://fonts.gstatic.com/s/alice/v7/acf9XsUhgp1k2j79ATk2cw.ttf'
    },{
      family:'VeraSeBd',
      url:'https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/2468/a107426f42f8a6c874ee31b569bed4ff/VeraSeBd.ttf'
    },{
      family:'Pacifico',
      url:'https://sungd.github.io/Pacifico.ttf'
    }
   

  ],
  }


})

页面js

let canvas = null
let ctx = null
let dpr = null
var appInstance = getApp();
const array = appInstance.globalData.array;
Page({
  data: {
    activeTab: 0, 
    fontFamily: 'Aemstel',
    loaded: false,
    fontSize:20,
    array:array,
    index:0,
    fm:null

  },

  onLoad() {
    this.setData({
      loaded: false
    })
  },

  draw(){
    const self = this;
    let fm = self.data.array[self.data.index].family;
    const query = wx.createSelectorQuery()
        query.select('#canvas')
          .fields({
            node: true,
            size: true
          })
          .exec((res) => {
            canvas = res[0].node
            ctx = canvas.getContext('2d')
            dpr = wx.getSystemInfoSync().pixelRatio
            canvas.width = res[0].width * dpr
            canvas.height = res[0].height * dpr
            ctx.scale(dpr, dpr)
            let x = 20
            let y = 20
            let fontSize = 20
            // ctx.fillStyle="#FF0000";
            ctx.font = "italic "+ fontSize + 'px '+ fm;
            // ctx.textBaseline = 'middle'
            // ctx.textAlign = 'center'
            ctx.clearRect(20,20,300,200);
            ctx.fillText("Bitstream Vera Serif Bold", x, y);
            ctx.fillText("1239", x, y+50);
            ctx.fillText("abc", x, y+100);
            ctx.fillText("我是方哈", x, y+150);
          })
      
  },
  bindPickerChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      index: e.detail.value,
      fm:this.data.array[e.detail.value].family
    })
    this.draw();
  },


})

wxml

<view class="container">
  <view class="page-body">
    <view class="page-section">
    <view>
      选择字体
      <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}" range-key="family">
        <view class="picker">
          当前选择：{{array[index].family}}
        </view>
      </picker>
    </view>
    <view>常规：  <text>我是方哈 1239 abc</text></view>
    <view class="csf">下面是css自定义字体效果9</view>
      <view class="page-body-info display-area {{ loaded ? 'font-loaded' : '' }}" style="font-family:{{fm}}">
        <text wx:if="{{!loaded}}">Load {{ fontFamily }}</text>
        <text wx:else>{{ fontFamily }} is loaded</text>
        <text>我是方哈 1239 abc</text>
      </view>
      <!-- <view class="btn-area">
        <button type="primary" bindtap="loadFontFace">加载字体</button>
      </view>

      <button type="primary" bindtap="draw">绘画</button> -->
      <view>canvas 2d 画布自定义字体效果</view>
      <canvas type="2d" id="canvas" class="canvas"  style="width: 300px; height: 200px;" ></canvas>

      
      
    </view>
  </view>
</view>