css/svg/canvas基础绘图

github地址

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

只是一个绘制图形的容器，在元素上绘图主要有三步：

• 获取元素对应的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