文字与图片

setFontSize

设置字体的字号。数字越大,字体越大。

参数(表8-91): 表8-91

参数 类型 说明
fontSize Number 字体的字号

fillText

在画布指定位置绘制被填充的文本。

参数(表8-92): 表8-92

参数 类型 说明
text String 在画布上输出的文本
x Number 绘制文本的左上角x坐标位置
y Number 绘制文本的左上角y坐标位置

drawImage

绘制图像,图像源可以是本地图片或网络图片。

参数(表8-93): 表8-93

参数 类型 说明
imageResource String 所要绘制的图片资源
x Number 图像左上角的x坐标
y Number 图像左上角的y坐标
width Number 图像宽度
height Number 图像高度

示例代码:

Page({
  onLoad: function () {
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.drawImage("../../utils/image.png", 0, 0, 150, 100)
    ctx.draw()
  },
})

运行结果如图8-31: 图8-31 图片API例图

这里使用的图片为保存在utils文件夹下的一张图片,加载网络图片的话直接使用url地址即可。图片会根据设置的宽高拉伸。

results matching ""

    No results matching ""