はじめまして、フロントエンドエンジニアのドリルです。今年の3月に入社いたしました。 「ドリル」というあだ名には、「深く掘り続ける、探求する」という意味があります(名付け親はLIGのデザイナー、藤田さんです)。今後はLIGブログでもさまざまなトピックを掘り下げて書いていきたいと思うので、どうぞよろしくお願いいたします! さて今回は、CANVASでアルファマスクアニメーションを作る方法をご紹介します。 今回のゴール こちらが完成形です。スポットライトを当てたような表現など、アニメーション表現に応用できます。ちなみにIE11対応です! See the Pen CANVAS – ALPHA MASK by Sho Shindo (@kabukimono) on CodePen. 何かドキドキする動きですね。まさかツインテールだったとは。 用意するもの 2つの画像を準備します。 背景jpg画像(今回
![CANVASでドキドキする「アルファマスクアニメーション」を作ろう! | 株式会社LIG(リグ)|DX支援・システム開発・Web制作](https://cdn-ak-scissors.b.st-hatena.com/image/square/b79f528e409c1c9cfac5ae799ac18d2cdb38d5fd/height=288;version=1;width=512/https%3A%2F%2Fliginc.co.jp%2Fwp-content%2Fuploads%2F2018%2F09%2Fec_180906_02_h_ogp.jpg)