HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML5のCanvasにSVGファイルを描画する方法

Canvas（キャンバス）にSVGを描画するには、SVGを画像として扱う必要があります。まず、HTMLコンテンツを含めるための<foreignObject>要素を使ってSVGデータを構築し、その後、生成したSVG画像をCanvas上に描画します。

具体的な流れは以下の通りです。

処理の手順

  1. SVG文字列を作成する：<svg>要素の中に<foreignObject>要素を配置し、その中にXHTML名前空間（xmlns="https://www.w3.org/1999/xhtml"）を指定したHTMLを記述します。
  2. Blobオブジェクトに変換する：作成したSVG文字列を、MIMEタイプ「image/svg+xml」を指定してBlobとしてラップします。
  3. オブジェクトURLを生成する：URL.createObjectURL()を使って、BlobからオブジェクトURLを作成します。
  4. Imageオブジェクトに読み込む：新しいImageインスタンスのsrcにオブジェクトURLを設定し、onloadイベントで読み込み完了を待ちます。
  5. Canvasに描画する：drawImage()メソッドを使って画像をCanvasに描画し、使用後はrevokeObjectURL()でURLを解放します。

サンプルコード

以下のコードを実行すると、HTMLのCanvas上にSVGファイルを描画できます。

<!DOCTYPE html>
<html>
   <head>
      <title>SVG file on HTML Canvas </title>
   </head>
   <body>
      <canvas id="myCanvas" style="border:2px solid green;" width="300" height="300"></canvas>
      <script>
         var canvas = document.getElementById('myCanvas');
         var ctx = canvas.getContext('2d');
         var data = '<svg xmlns="https://www.w3.org/2000/svg" width="300"
         height="200">' +
            '<foreignObject width="100%" height="100%">' +
               '<div xmlns="https://www.w3.org/1999/xhtml" style="font-size:50px">' +
                  'Simply Easy ' +
                  '<span style="color:blue;">' +
                  'Learning</span>' +
               '</div>' +
            '</foreignObject>' +
         '</svg>';
         var DOMURL = window.URL || window.webkitURL || window;
         var img1 = new Image();
         var svg = new Blob([data], {type: 'image/svg+xml'});
         var url = DOMURL.createObjectURL(svg);
         img1.onload = function() {
            ctx.drawImage(img1, 25, 70);
            DOMURL.revokeObjectURL(url);
         }
         img1.src = url;
      </script>
   </body>
</html>

実行結果

このコードを実行すると、緑色の枠線が付いた300×300ピクセルのCanvas内に、「Simply Easy Learning」というテキスト（「Learning」部分は青色）が描画されたSVG画像が表示されます。

注意点

  • セキュリティ上の制限により、SVG内から外部リソース（外部画像や外部フォントなど）を読み込むことはできません。すべてのリソースはインラインで埋め込む必要があります。
  • Canvasに外部由来の画像を描画すると、そのCanvasは「汚染（tainted）」状態になり、toDataURL()やgetImageData()が使えなくなる場合があります。今回のようにBlob URLで生成したSVGは同一オリジン扱いとなるため、基本的に問題ありません。
  • メモリリークを防ぐため、描画が完了したら必ずrevokeObjectURL()を呼び出してオブジェクトURLを解放しましょう。
  1. HTML5 Canvasを使って星を描く方法を解説

    HTMLのcanvas要素に描画を行うには、JavaScriptを使用します。実際に描き始める前に、HTML DOMメソッドであるgetElementById()とgetContext()を使って、キャンバスへの参照と描画コンテキストを取得しておく必要があります。HTMLで星を描くには、canvas要素を利用します。星形を描く際にはlineTo()メソッドが便利です。このメソッドはx座標とy座標の2つのパラメータを受け取り、その位置へ線を引くことで図形を形成していきます。まず、HTMLドキュメント内にキャンバスを配置する方法から見ていきましょう。サンプルコード以下のコードを実行すると、HTML

  2. HTML5でSVGを使って図形を描画する方法を徹底解説

    SVGとは？SVG（Scalable Vector Graphics／スケーラブル・ベクター・グラフィックス）は、2Dグラフィックスや図形アプリケーションをXML形式で記述するためのマークアップ言語です。記述されたXMLコードは、SVGビューアによって画面へ描画されます。現在では、ほとんどのWebブラウザがPNGやGIF、JPGなどの画像形式と同様に、SVGをそのまま表示できるようになっています。SVGを活用すれば、円・長方形・線などの基本的な図形を、HTML5の文書内で手軽に描画できます。ここでは、SVGを使って長方形を描く具体例を紹介します。サンプルコード次のコードを実行すると、<r