Closed Jasery closed 5 months ago
// 引入 `wx-canvas-2d` 插件
import {
WxCanvas2d
} from 'wx-canvas-2d'
// 实例化对象
const canvas = new WxCanvas2d()
// 创建画布
canvas.create({
query: '.poster-canvas', // 必传,canvas元素的查询条件
rootWidth: 750, // 参考设备宽度 (即开发时UI设计稿的宽度,默认375,可改为750)
bgColor: '#fff', // 背景色,默认透明
component: this, // 自定义组件内需要传 this
radius: 16 // 海报图圆角,如果不需要可不填
})
wx.loadFontFace({
family: 'TencentSans',
source: 'url("https://h5app.qq.com/act/TEG/tencent_font_switch_w7w3/fonts/TencentSans-W3.woff2")',
scopes: ['webview', 'native'],
success: (res) => {
canvas.fontFamily = 'TencentSans'
},
fail: (res) => {
console.log(res)
},
complete: (res) => {
console.log(res.status)
}
})
对于绘制分享海报类场景,还是有自定义字体的需求,小程序的 canvas 本身是支持的,示例见基础能力 / 画布 / 介绍