描画位置とDOMを一致させる
drawElementImage()が返す変換行列をstyle.transformへ設定します。カードを移動・拡大・回転しても、見えている位置でそのまま操作できます。
操作デモ
<div>
</div>
<canvas layoutsubtree>
</canvas>
確認できること
見た目と操作が一致する
描画と同じ変換をHTML側のヒットテストにも反映するため、移動・拡大・回転後も操作できます。
3つのデモの到達点
Canvasの中身が「生きたUI」になる
HTMLのレイアウト、リアルタイムな更新、入力やクリックをCanvasの描画と組み合わせられます。
デモの中心となるコード
コードを読み込んでいます…