HTML5_html5 チュートリアル スキルにおける Canvas と SVG の描画原理の比較

WBOY
リリース: 2016-05-16 15:50:02
オリジナル
1558 人が閲覧しました

Canvas と SVG ではどちらもブラウザーで画像を描画できますが、基本原理は異なります。
SVG
SVG は、2 次元グラフィックスを XML で記述するための言語です。
SVG は XML に基づいており、すべての要素が SVG DOM 内で使用できることを意味します。各要素に JS イベント ハンドラーを追加できます。
SVGでは、各グラフィックはオブジェクトとして記録されます。 SVG オブジェクトのプロパティが変更された場合、ブラウザはグラフィックを自動的に再生成できます。

Canvas
Canvas は (JS を使用して) 2D グラフィックをオンフライで描画できます。
Canvas はピクセルに従って再生成できます。

Canvas では、グラフィックが完成すると、ブラウザーによって忘れられます。グラフィックの位置を変更する場合は、グラフィックで覆われているオブジェクトも含めて画面全体を再描画する必要があります。

Canvas と SVG の比較
次の表は、Canvas と SVG の主な違いを示しています。

Canvas          SVG
依赖分辨率      独立于分辨率
不支持事件处理器 支持事件处理器
弱文本渲染能力 最适合具有大渲染面积的应用(谷歌地图)
可以保存最终图片为PNG或者JPG 复杂图像,重画变慢(任何使用DOM很多的情况都会变慢)
最适合许多 对象频繁重画的图形游戏        不适合游戏应用
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート