小程序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].nodectx = canvas.getContext('2d')dpr = wx.getSystemInfoSync().pixelRatiocanvas.width = res[0].width * dprcanvas.height = res[0].height * dprctx.scale(dpr, dpr)let x = 20let y = 20let 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>

小程序canvas 2d 自定义字体相关推荐

小程序canvas生成海报字体在背景图下方
小程序canvas生成海报字体在背景图下方图片是异步加载可以放在回调里设置字体也可以延迟放置如果还有更好的方法可以留言
小程序canvas 2d 绘图无法drawImage图片？
小程序canvas 2d 绘图无法drawImage图片? 微信iOS 7.0.20 版本使用canvas 2d 绘制drawImage时无法成功绘制,图片不显示,img1.onload不执行,执行 ...
【微信小程序】使用自定义字体
微信小程序使用自定义字体文章目录微信小程序使用自定义字体 1. 微信小程序默认支持的字体 2. 自定义字体获取 3. 文字提取和字体ttf文件压缩 4. 字体转Base64格式 5. 字体应用到小 ...
记一次微信小程序canvas 2d 生成海报问题
因项目需要,需要制作海报分享. 如: 事情总是不是那么顺利,canvas生成海报生成中遇到各种奇葩问题.一开始是 wx.canvasToTempFilePath 中获取不到canvas对象,调用返回 ...
小程序canvas绘制自定义分享图片并分享给好友
小程序的分享有自己的机制,在页面点击右上角,或者页面中的button 采用open-type=share方式也可以触发onShareAppMessage方法. 文档里面明确说明,分享的图片可以采用网络 ...
微信小程序使用html2canvas,微信小程序canvas 2d 引入本地图片并生成分享图
在小程序基础库 v2.9.0 正式开放一套全新的 Canvas 接口.该接口符合 HTML Canvas 2D 的标准,实现上采用 GPU 硬件加速,渲染性能相比于现有的 Canvas 接口有一倍左右 ...
微信小程序canvas怎么设置字体透明度
微信小程序自带的设置透明度只有setGlobalAlpha,但是CanvasContext.setGlobalAlpha设置透明度,是全局透明,整张图片都透明了.所以直接使用是不行的. 换种思路实现: ...
微信小程序：引入自定义字体
微信小程序引入外部字体看了网上很多文章后发现可以把字体上传到https://transfonter.org/转成base64后下载下来, 引入对应css后发现太大啦, 然后在网上搜罗了一番,发现了一 ...
小程序 canvas 2d 绘制图片并保存
获取canvas实例,使用的官方的代码.用一个变量canvas保存实例,后续保存时会调用. data () {return {canvas: null // 实例} }, onReady() {con ...

小程序canvas 2d 自定义字体

小程序canvas 2d 自定义字体相关推荐

最新文章

热门文章