一. css繪圖
image.png
image.png
1.利用border制作圖形
image.png
image.png
2.利用skew制作圖形
image.png
3.利用CSS漸變制作圖形
image.png
image.png
4.利用圓角屬性制作圖形
(注意)border-radius具有兩個(gè)特性：大值特性和等比例特性昌简。這兩個(gè)特性主要用來控制當(dāng)border-radius的值大于元素的outerWidth或outerHeight時(shí)跨细，元素邊框的變形行為。
image.png
image.png
5.利用BOX-SHADOW屬性制作圖形
image.png
image.png
6.利用偽元素制作圖形
image.png
image.png
image.png
CSS繪圖小結(jié):
- border邊框
- skew斜切
- 漸變
- 圓角屬性
- box-shadow陰影
- 偽元素
二. SVG(可縮放矢量圖形)繪圖
| 元素 | 描述 |
|---|---|
| line | 創(chuàng)建一條簡單的線 |
| polyline | 定義由多個(gè)線定義構(gòu)成的形狀 |
| rect | 創(chuàng)建一個(gè)矩形 |
| circle | 創(chuàng)建一個(gè)圓形 |
| ellipse | 創(chuàng)建一個(gè)橢圓 |
| polygon | 創(chuàng)建一個(gè)多邊形 |
| path | 支持任意路徑的定義 |
內(nèi)置了一些基礎(chǔ)圖形元素啸箫，同時(shí)path元素可以使用一組專門的命令創(chuàng)建任意圖形
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>只是一個(gè)繪制圖形的容器飘千，在<canvas>元素上繪圖主要有三步：
- 獲取<canvas>元素對(duì)應(yīng)的DOM對(duì)象堂鲜，這是一個(gè)Canvas對(duì)象；
- 調(diào)用Canvas對(duì)象的getContext()方法护奈，得到一個(gè)CanvasRenderingContext2D對(duì)象缔莲；
- 調(diào)用CanvasRenderingContext2D對(duì)象進(jìn)行繪圖。
1. CANVAS畫直線
image.png
2. CANVAS畫三角形
image.png
3. CANVAS畫矩形
image.png
4. CANVAS畫圓形
image.png
5. CANVAS畫復(fù)雜圖形
image.png
