Canvas動画を縁取る

Youtubeに投稿するような動画の上部をカットする技術はまだ、未開発です。今回、Canvas要素を使って描いた動画に縁取りを付けてみました。仕組みはハート型写真を作るで採用した重ね書き方法です。

CANVASで描いた画像にかたどるパターンを上書きします。先の記事で解説したように、表示させる部分は透明色、表示をカットする部分を白色のパターンを用意します。

JavaScriptのプログラミング例を以下に示します。

      for(var i = 0; i < NUM; i++){
        …                                      //省略
        ctx.beginPath();                        //更新した座標で円を描く
        ctx.fillStyle = 'rgb(' + r[i] + ',' + g[i] + ',' + b[i] + ')';
        ctx.arc(locX[i], locY[i], radius[i], 0, Math.PI*2.0, true);
        ctx.fill();								//表示を完成させる
      }
      ctx.drawImage(Img[ImageCounter], 0, 0);	//縁取り画像を表示する

応用例

HTMLのCanvas要素を用いて、以前、ダイナミック新年書簡2016で下図のような花火の動画を作りました。四角形では花火の雰囲気が出にくいので、その下の雲の形に象った動画を作ってみます。

夜空をイメージした雲のなかで動画が展開します。表示する動画は全く、同じものですがフィルター効果で縁取りが生きてきます。

採用例

この手法で作った短い動画を93回2017箱根駅伝の往路と復路の間に挟み込みました。開始から1分20秒近辺で出現します。冬の花火をご覧いただけます。

最後に

このたびの技術の基本はCANVASとフィルター画像による重ね書きです。これを応用すれば、Youtubeに投稿するような動画を縁取ることも可能になると思われます。

AVI、MP4、WEBM、WMVなどの動画はCANVAS要素を使って表示することは容易です。2つの技術を融合すれば、多様な形状を縁取った動画を実現できそうです。