CSS Painting APIについて取り急ぎまとめてみた

次期Chrome65でのサポートがうたわれているCSS Painting APIについて構成がcanvasっぽいとのことだったのでまとめてみました.

CSS Painting APIの基本的な使い方・まとめ
https://defghi1977-tech.firebaseapp.com/cssPainting/cssPainting.htm
http://defghi1977.html.xdomain.jp/tech/cssPainting/cssPainting.htm

※二つあるのは本APIがHTTPS環境でしか動作しないから.
ずっとlocalhost環境で試していたからわからんかったけれど, 確かChromeのポリシーに強力なAPIはとりあえずHTTPSでしか動作させないってのがあったので, 多分これに引っかかっている.
(運用的にめどいけれど悔しいので両方残しておくこととす)


でね, 調べてみてわかったんだけれど, このAPIに付随する「CSS Properties and Values API Level 1」ってのがあって, 個人的にはこっちのほうが画期的な気がするんよ.

カスタムプロパティに型を指定すると, あら不思議, CSSからアニメーション化できるようになるんよ.
要するにCSS Animation/Transition/Web Animations APIの機能を補完する内容にもなっておって,  シンプルながらもインパクトが大きいのさ.(もちろんCSS Painting APIもすごいけどね)