1、SVG
SVG是一種XML語言，類似XHTML藻烤，可以用來繪制矢量圖形我衬。SVG可以通過定義必要的線和形狀來創(chuàng)建一個圖形羽圃，也可以修改已有的位圖碳锈，或者將這兩種方式結合起來創(chuàng)建圖形寓搬。SVG教程
image.png
以下是MDN上的一個例子：
<rect width="100%" height="100%" fill="red" />
<circle cx="150" cy="100" r="80" fill="green" />
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>
繪制了一個矩形（rect標簽）杂彭、圓圈（circle標簽）和文字（text標簽）滥嘴。一般如果畫布比較大木蹬，有縮放、平移等高頻的交互的場景若皱，常見的餅圖届囚、柱狀圖、流程圖之類的開發(fā)是尖，可以考慮使用 SVG 意系。
2、Canvas
Canvas API 提供了一個通過JavaScript 和 HTML的元素來繪制圖形的方式饺汹。它可以用于動畫蛔添、游戲畫面、數(shù)據(jù)可視化兜辞、圖片編輯以及實時視頻處理等領域迎瞧。Canvas教程
Canvas繪制的圖形不會出現(xiàn)在DOM結構中，一般小畫布逸吵、大數(shù)據(jù)量的場景適合用Canvas凶硅，性能更好。
以下是一個簡單例子：
HTML部分：
<canvas id="canvas"></canvas>
JavaScript代碼部分：
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'green'; ctx.fillRect(10, 10, 150, 100);
3扫皱、WebGL
WebGL 使得在支持HTML 的 canvas 標簽的瀏覽器中足绅，不需要安裝任何插件，便可以使用基于 OpenGL ES 2.0 的 API 在 canvas 中進行2D和3D渲染韩脑。如果您有一些3D繪制的需求氢妈，可以采用webGL方案。尤其是3d地圖段多、3d地球等繪制都需要用到webGL技術首量。
webGL是基于Canvas的繪圖技術。要使用webGL進行3D渲染进苍，首先得在頁面中創(chuàng)建一個canvas元素加缘，通過這個canvas元素來初始化WebGL上下文。WebGL 教程
