Ankerさん。デスクが片付く12 in 1最強モニタースタンドがほぼ9,000円OFFでいいの...? #楽天スーパーSALE
![HTML5のアニメーションを簡単に作成できるサイト「HTML5 MAKER」 | ライフハッカー・ジャパン](https://cdn-ak-scissors.b.st-hatena.com/image/square/4b4cad7bd7f3e02b995c6e695eca1db73e10c3a1/height=288;version=1;width=512/https%3A%2F%2Fmedia.loom-app.com%2Flifehacker%2Fdist%2Fimages%2F2013%2F08%2F130814_ht.jpg%3Fw%3D1280%26h%3D630%26f%3Djpg)
「HTML5で冷気を表現したサイトがすごいな | IDEA*IDEA」で紹介されていた「メンソール系 氷冷エナジードリンク RAIZIN COOL」のリアルな冷気の表現がHTML5/Canvasで作成されているということで、どんな風に出来ているか気になったので分解してみました。 Canvasに透過pngを描画してループさせる (1)(2)(3)と、それぞれに<canvas>を配置します。そこに透過pngで作成されたリアルな冷気画像を、少しずつ動かして描画します。(1)は右から左へ、(2)は時計まわり、(3)は上から下へ。 スムーズなループアニメーション (1)の右から左へのアニメーションの場合、同じ位置に同じサイズで<canvas>を2つ配置して、それぞれに同じ透過pngを描画します。片方は透過pngの幅サイズ分、右にオフセットして画像の右端と左端が継ぎ目なく繋がるようになっています。 マ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く