WebAssemblyはWeb上で高速実行されるバイナリフォーマットです。しかし問題として、DOMは扱えません。もしDOMを使う場合にはWebブラウザ側にメッセージを流してJavaScriptで更新するか、Canvasのメモリを直接書き換える方法になります。 今回紹介するCanvasKitはアニメーションライブラリであるSkiaがWebAssemblyを使ってCanvas上で実行されるソフトウェアです。

CanvasKitの使い方

線が動き、太さが変わります。マウスクリックで星の位置を変えられます。

Canvas上で線を引きます。線は引く度に色を変えます。

ブロックが動くデモ。

飲み物のアニメーション。

ボールが飛び散るデモ。

こんな派手なアニメーションも。

マウスドラッグによってテキストの表示幅をダイナミックに変えるデモです。

CanvasKitで、インタラクティブにコンテンツがアップデートされるアニメーションが作れます。元々のコンテンツはJSONフォーマットになっており、SVGとは異なるもののようです。このファイルを作るのが一つの肝になりそうです。

CanvasKitはC++製のオープンソース・ソフトウェア(BSD License)です。

CanvasKit - Skia + WebAssembly canvaskit-wasm - npm