API 文档
WikiAboutLinks

API 文档

🦀 mixscript 实现了一套 Canvas 规范，在 window 属性上，有如下的全局类、对象或函数，关于这些 API 的使用，请去 MDN 上查看相关文档。
 
  • ImageData
  • HTMLImageElement
  • Image
  • createImageBitmap
  • CanvasRenderingContext2D
  • OffscreenCanvas
  • HTMLCanvasElement
  • Path2D
  • CanvasPattern
  • CanvasGradient
  • FontFace
  • FontFaceSetLoadEvent
  • TextMetrics
  • DOMMatrix

全局对象 mix

在全局上下文中，存在一个 mix 全局对象，该对象有一些有用的属性：
console.log(mix.version) // 当前版本
console.log(mix.headless) // 是否是离屏模式
console.log(mix.fps) // fps 设置
全局唯一的 Canvas 对象挂在于 mix 对象上：
const canvas = mix.canvas
const ctx = canvas.getContext('2d')
Canvas 的默认背景色可以被设置，在 headless 模式下，默认背景为透明，在窗口预览模式下，默认背景为纯白
mix.backgroundColor = <css-color-string>

全局 await

await 关键字可以在全局上下文使用，在 canvas 绘制场景下，可能有资源需要被预加载，可以通过 await 保证首帧绘制之前，异步资源都得到加载：
const ctx = mix.canvas.getContext('2d');

const img = new Image();
img.src = <image-url>;

await img.decode();

ctx.drawImage(img, 0, 0);

fonts 对象

mixscript 中没有全局的 document 对象，Web 标准中， document.fonts 用于托管自定义字体，目前这个责任落在了 mix 对象上
const FONT_URL = 'https://at.alicdn.com/t/webfont_mzdf43z7i0d.ttf'
const fontface = new FontFace('alifont',  `url(${FONT_URL})`);
await fontface.load();
mix.fonts.add(fontface);

const ctx = mix.canvas.getContext('2d')

ctx.font = '40px alifont';
ctx.fillText("还没来得及去沾花惹草，就被人拔光了。Alibaba Font Family", 50, 50)

帧循环

mixscript 内部实现了 rAF/cAF 全局函数，在 headless 模式下， requestAnimationFrame 会与帧渲染对齐，只有等待帧渲染完成，该函数才会执行。
function update(time) {
  // 绘制画布
}
function loop(time) {
  update(time);
  requestAnimationFrame(loop)
}
loop(0);

主动垃圾回收 gc()

v8 全局的 gc() 函数在 mixscript 中被开启了，但是正常情况下尽量避免使用。
gc()