SVG と HTML5 Canvas の違いは何ですか?

PHPz
リリース: 2023-09-18 22:49:02
転載
1163 人が閲覧しました

SVG和HTML5 Canvas之间有什么区别?

HTML 要素は SVG グラフィックのコンテナです。 SVG はスケーラブル ベクター グラフィックスの略です。 SVG は、ボックス、円、テキストなどのグラフィックを定義するのに役立ちます。 SVG は Scalable Vector Graphics の略で、2D グラフィックスおよびグラフィックス アプリケーションを XML で記述するための言語で、XML は SVG ビューアによってレンダリングされます。ほとんどの Web ブラウザは、PNG、GIF、JPG と同様に SVG を表示できます。

HTML 要素は、JavaScript 経由でグラフィックを描画するために使用されます。 要素はグラフィック コンテナです。

# SVGHTML キャンバス##SVG はスケーラビリティに優れています。そのため、どの解像度でも高品質で印刷できます#SVG で印刷するのには適していません。 #Canvas はスクリプトを介してのみ変更できますキャンバスはラスターに基づいており、ピクセルで構成されます。 次のコードを実行して、Web ページにスケーラブル ベクター グラフィックス (SVG) を追加してみることができます。
<!DOCTYPE html>
<html>
   <head>
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
      <title>HTML5 SVG</title>
   </head>
   <body>
      <h2 align = "center">HTML5 SVG Circle</h2>
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <circle id = "bluecircle" cx = "60" cy="60" r = "50" fill = "blue" />
      </svg>
   </body>
</html>
ログイン後にコピー
Example

キャンバスは拡張性に劣ります。したがって、オブジェクトの数が少ない場合や表面が大きい場合に、高解像度の

Canvas は、小さなサーフェスまたは多数のオブジェクトで優れたパフォーマンスを提供します。

##SVG はスクリプトと CSS を介して変更できます

SVG はベクトルベースであり、形状で構成されています。

次のコードを実行して、HTML5 Canvas を使用して四角形を描画する方法を学習してください:

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 Canvas Tag</title>
   </head>
   <body>
      <canvas id = "newCanvas" width = "200" height = "100" style = "border:1px solid #000000;"></canvas>
      <script>
         var c = document.getElementById(&#39;newCanvas&#39;);
         var ctx = c.getContext(&#39;2d&#39;);
         ctx.fillStyle = &#39;#7cce2b&#39;;
         ctx.fillRect(0,0,300,100);
      </script>
   </body>
</html>
ログイン後にコピー

以上がSVG と HTML5 Canvas の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:tutorialspoint.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート