update.はじめにCanvasを利用して、懐かしのビックリマンシールのようなエフェクトを表現してみました。Gifアニメは重たくアップできなかったため静止画にしましたが、地味にアニメーションして光ります。[動作イメージ]※テキストと写真は普通の画像です。実際の動作は以下で確認することができます。動作イメージは同じ色に対し、ブレンドモードをスクリーン、乗算と変えただけです。*/createBikkuri(ptnSrc);作り方・考え方まずはパターンとして敷き詰めるための小さな円錐グラデーションを作成しますパターンを作成するためにCanvasサイズを一旦小さくします生成後、canvas.toDataURL()を返し、パターンを画像として渡せるようにしますここまでCanvasを見せないようにCSSでopacity:0を指定していますCanvasサイズを元に戻し、パターン画像をcreatePattern()で指定すれば基本はおしまいですここでは色を付けるために少し手を加えていますパターンを敷き詰めた上に、色を重ねてブレンドモードを指定するだけですスクリーンや乗算といったブレンドモードはcontext.globalCompositeOperationで設定することができます後はアニメーションさせるために、フレームごとにrgbaの透明度を変更させています最後に好きな画像をpositionでCanvasに重ねて完了です終わりに作り方は自分で考えてみたので、書き方が微妙だったり非効率な可能性があります。良い方法があればご教授くださいませ。requestStockLike35@nekoneko-wanwanWebデザイン、フロントエンド開発を主にやっています。真面目なものから、変なものまで。色々な記事を投稿していければと思います。Follow株式会社ホットスタートアップ「ペライチ」を開発する会社です。upLoginユーザーは見つかりませんでした。