canvasでsvgパスを利用する

条件上svgがどうしても利用できない、でもjsを使って色を変えたい……。

『じゃあcanvasで図形を描画して色を指定すればいいのでは？』

わかる。でもcanvasで自由に図形を描くのってちょっと複雑になると鬼ほど面倒だった気がする……。

面倒なのは嫌いだ……。


なんかこう……
illustratorで好きな図形を描いて、
そこからSVGデータを取得して、
それを良い感じにjsのコードで表現(変換)するシステムを通して、
canvasに描画できないモンですかねぇ〜〜！！

画像としてcanvasに取り込むのは嫌なんですよね……
色が変えられないわけではないけど、色指定が複雑になりそうで……

いやいや流石にそんな、、、我儘なこと……

できるらしい。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1940935398404945"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-1940935398404945"
     data-ad-slot="2442345872"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Path2Dを使う

svgのパスデータでそのまま図形を描ける『Path2D』という機能があります。
公式のドキュメントを読んでたら普通に書いてありました。

developer.mozilla.org

すげ〜

IE以外のブラウザなら使えるとのこと。(現状)
canvasが使える環境なら、特別何か新しく導入準備しなくてもいいようです。

使い方

 function draw() {
　///描く対象のcanvasを取得。
    var canvas = document.querySelector('canvas');
    if (canvas.getContext){
      var ctx = canvas.getContext('2d');

        ///Path2Dオブジェクトを定義・生成。
    var p = new Path2D('M10 10 h 80 v 80 h -80 Z');
　　///パスデータを使ってfill ()塗りつぶし。
　ctx.fill(p);
    }
  };

  draw();

上記のような感じ。

  var p = new Path2D('M10 10 h 80 v 80 h -80 Z');

大事な部分はここです。『new Path2D()』でPath2Dオブジェクトを生成できます。

これをfill関数の引数に入れたりすれば図形が描ける様子。

現状の理解だと複雑なイラストとかはやっぱり面倒な気がしますが、単色のロゴとかならsvgが利用できない場面でも、いちいち画像を用意せずとも色を変えられそうです……

よかった〜