HTML
HTML
# SVG | HTML キャンバス |
##SVG はスケーラビリティに優れています。そのため、どの解像度でも高品質で印刷できます
キャンバスは拡張性に劣ります。したがって、オブジェクトの数が少ない場合や表面が大きい場合に、高解像度の |
| #SVG で印刷するのには適していません。
Canvas は、小さなサーフェスまたは多数のオブジェクトで優れたパフォーマンスを提供します。
|
##SVG はスクリプトと CSS を介して変更できます
|
#Canvas はスクリプトを介してのみ変更できます
|
SVG はベクトルベースであり、形状で構成されています。
|
キャンバスはラスターに基づいており、ピクセルで構成されます。
|
例
| 次のコードを実行して、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
次のコードを実行して、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('newCanvas');
var ctx = c.getContext('2d');
ctx.fillStyle = '#7cce2b';
ctx.fillRect(0,0,300,100);
</script>
</body>
</html>
以上がSVG と HTML5 Canvas の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。