canvas + create.js で特定のブラウザでインスタンスの位置を調整する

Adobe Animate CCを使うことになって、canvasでアニメーション作ってhtmlに埋め込むお仕事中に、Firefoxだけ位置がずれる現象に出会ってしまった。。。

そして困っている人も。
javascript – Text position on canvas is different in FireFox and Chrome – Stack Overflow

今回やってるのはPCのみでOKなやつだったので、ベタだけど、UAがFirefoxの時だけ、位置を変えるってので対応した。

[javascript]
var agent = navigator.userAgent;
if(agent.search("Firefox") != -1) {
// Position change
this.instance_name.y = -55;
}
[/javascript]

↑↑これでFirefoxだけ調整できる。

Adobe Animateの吐き出すコードは、init()があったので、タブの切り替えとか、要素が画面に出てきたら○○するとか、やりやすい印象 🙂
っつーか、initを作っておくのって何かと便利なんだなぁと思った (^^)

Adobe Animateって旧Flash。タイムラインとか、ほぼ変わってなかった。
久しぶりに使ったけど、canvas書き出すんだったら、ロゴとか面白そうだなと思った。

昔よくレイヤーにASとか名前付けてタイムラインにActionScriptとかを引きつりながら書いた記憶あったけど、JavaScriptも書けるんすね〜 🙂
ダイナミックテキスト(!! 懐かしいw)でカウントアップするアニメーションを作ったんだけど、単純に楽しい (^^)

…まだ終わってないけど…(^0^;)