一. css繪圖
image.png
image.png
1.利用border制作圖形
image.png
image.png
2.利用skew制作圖形
image.png
3.利用CSS漸變制作圖形
image.png
image.png
4.利用圓角屬性制作圖形
(注意)border-radius具有兩個特性：大值特性和等比例特性。這兩個特性主要用來控制當border-radius的值大于元素的outerWidth或outerHeight時，元素邊框的變形行為。
image.png
image.png
5.利用BOX-SHADOW屬性制作圖形
image.png
image.png
6.利用偽元素制作圖形
image.png
image.png
image.png
CSS繪圖小結:
- border邊框
- skew斜切
- 漸變
- 圓角屬性
- box-shadow陰影
- 偽元素
二. SVG(可縮放矢量圖形)繪圖
| 元素 | 描述 |
|---|---|
| line | 創建一條簡單的線 |
| polyline | 定義由多個線定義構成的形狀 |
| rect | 創建一個矩形 |
| circle | 創建一個圓形 |
| ellipse | 創建一個橢圓 |
| polygon | 創建一個多邊形 |
| path | 支持任意路徑的定義 |
內置了一些基礎圖形元素，同時path元素可以使用一組專門的命令創建任意圖形
1.利用SVG LINE 元素制作圖形
image.png
2.利用SVG POLYLINE 元素制作圖形
image.png
3.利用SVG RECT 元素制作圖形
image.png
4.利用SVG CIRCLE 元素制作圖形
image.png
5.利用SVG POLYGON 元素制作圖形
image.png
6.利用SVG PATH 元素制作圖形
image.png
image.png
image.png
image.png
三. CANVAS繪圖
<canvas>只是一個繪制圖形的容器，在<canvas>元素上繪圖主要有三步：
- 獲取<canvas>元素對應的DOM對象，這是一個Canvas對象；
- 調用Canvas對象的getContext()方法，得到一個CanvasRenderingContext2D對象；
- 調用CanvasRenderingContext2D對象進行繪圖。
1. CANVAS畫直線
image.png
2. CANVAS畫三角形
image.png
3. CANVAS畫矩形
image.png
4. CANVAS畫圓形
image.png
5. CANVAS畫復雜圖形
image.png
