mixscript
mixscript

mixscript

💡
使用 JavaScript / TypeScript 创作视频
notion image

说明

mixscript 旨在打造一个新的 JavaScript 运行环境,以脱离浏览器环境实现音视频的处理与创作。

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()