一、画布

获取主屏canvas
示例代码

const canvas = getCurrentPage().getCanvas()
const ctx = canvas.getContext("2d");

Canvas document.createElement('canvas')

获取离屏canvas
webgl是主屏；2d的是离屏

• Canvas

离屏Canvas是可以设置width、height的，主屏Canvas设置width、height无效

CanvasRenderingContext2D Canvas.getContext("2d")

CanvasRenderingContext2D实现标准canvas2d接口。

WebGLRenderingContext Canvas.getContext("webgl")

实现标准的 WebGL 1.0 功能。

二、图片

Image new Image()

创建一个图片对象

示例代码

const img = new Image()
img.src = '/src/common/image/logo.png'
img.onload = function () {
  ctx.drawImage(img, 100, 20)
}

三、帧率

qg.setPreferredFramesPerSecond(Number fps)

可以修改渲染帧率。默认渲染帧率为 60 帧每秒。修改后，requestAnimationFrame 的回调频率会发生改变。
参数 Number fps
必须，帧率，有效范围 1 - 60

Number requestAnimationFrame(Function callback)

在下次进行重绘时执行
callback
必须

cancelAnimationFrame(Number requestID)

取消一个先前通过调用 requestAnimationFrame 方法添加到计划中的动画帧请求
requestID
必须

四、字体

String | Null qg.loadFont(String path)

加载自定义字体文件，如果加载字体成功，则返回字体 family 值，否则返回 null。
参数 String path
字体文件路径,字体文件路径。可以是代码包文件路径，也可以是qg.env.USER_DATA_PATH + ${文件地址}

Number qg.getTextLineHeight(Object object)

获取文本的行高
参数 Object object

示例代码

const fontFamily = qg.loadFont('/common/font/m8JVjfNVeKWVnh3QMuKkFcZVaUuH99GUDg.woff2')
const textLineHeight = qg.getTextLineHeight({
    fontFamily: fontFamily,
    text: 'I am Arial',
    success: function () {
      console.log('success 获取行获取行高成功  字体：', fontFamily)
    },
    fail: function (err) {
      console.error('fail 获取行高失败 err:', err)
    },
    complete: function (res) {
      console.log('complete 获取行高完成 res', res)
    }
  })
  console.log(' 字体：', fontFamily, '行高为：', textLineHeight)