一. 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
