変形しても操作できる
drawElementImage()は、2D
Canvasの描画位置とDOMの操作位置を自動で同期します。カードを移動・拡大・回転しても、追加の同期処理なしで見えている位置を操作できます。
操作デモ
<canvas content="drawable">
</canvas>
確認できること
見た目と操作が一致する
ブラウザーが描画時の変換をHTML側のヒットテストにも反映するため、移動・拡大・回転後も入力やクリックができます。
3つのデモの到達点
Canvasの中身が「生きたUI」になる
HTMLのレイアウト、リアルタイムな更新、入力やクリックをCanvasの描画と組み合わせられます。
デモの中心となるコード
コードを読み込んでいます…