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

HTML5キャンバスにSVGファイルを描画する方法は？

SVGをキャンバスに描画するには、SVG画像を使用する必要があります。まず、HTMLを含む要素を使用します。その後、SVG画像をキャンバスに描画する必要があります。

HTML5キャンバスにSVGファイルを描画する方法は？

例

次のコードを試して、HTMLキャンバスに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>

出力

HTML5キャンバスにSVGファイルを描画する方法は？


  1. キャンバスHTML5を使用して星を描く方法は？

    HTMLキャンバスへの描画は、JavaScriptを使用して行います。キャンバスに描画する前に、HTML DOMメソッドgetElementById（）およびgetContext（）を使用します。 HTMLで星を描くには、canvas要素を使用します。 キャンバスでは、lineTo（）メソッドを使用して星を描画します。 lineTo（）メソッドには、描画に役立つように線を配置するxおよびyパラメータ値が含まれています。 HTMLドキュメントにキャンバスを描画するには： 例 次のコードを実行して、HTML5キャンバスを使用して星を描くことができます <!DOCTYPE HTML&

  2. HTML5でSVGを使用して図形を描く方法は？

    SVGはScalableVectorGraphicsの略で、XMLで2Dグラフィックスとグラフィカルアプリケーションを記述するための言語であり、XMLはSVGビューアによってレンダリングされます。ほとんどのWebブラウザーは、PNG、GIF、およびJPGを表示できるのと同じようにSVGを表示できます。 HTML5のSVGを使用して、円、長方形、線などの図形を簡単に描画できます。 SVGを使用して長方形を描く例を見てみましょう。 例 次のコードを実行して、HTML5で長方形を描画してみてください。 要素が使用されます <!DOCTYPE html> <html>