🚀 优质资源分享 🚀
学习路线指引(点击解锁) | 知识定位 | 人群定位 |
---|---|---|
🧡 Python实战微信订餐小程序 🧡 | 进阶级 | 本课程是python flask+微信小程序的完美结合,从项目搭建到腾讯云部署上线,打造一个全栈订餐系统。 |
💛Python量化交易实战💛 | 入门级 | 手把手带你打造一个易扩展、更安全、效率更高的量化交易系统 |
00、前端图形
前端代码实现图形的几种方式:CSS、SVG、Canvas(主要是JavaScript编码)
CSS也是可以画图的,需要借助于高宽、边框border
、clip-path
裁剪、渐变色背景等属性来模拟实现各种图形,当然只能实现一些简单的图形。
**border:**用四条边框样式属性的各种组合变换,实现一些简单的图形。网上也有画一些稍微复杂的图形,如哆啦A梦,但代码量稍多,可读性不好,并不推荐。
| | <div class="gcss"> |
| | <p class="border">borderp> |
| | <p class="rborder">圆角按钮p> |
| | <p class="radio">p>radio |
| | <p class="triangle1">p>三角形 |
| | <p class="triangle2">p>三角形 |
| | div> |
| | <style> |
| | .gcss p { |
| | display: inline-block; |
| | text-align: center; vertical-align: middle; |
| | } |
| | .border { |
| | border: 30px solid; |
| | border-color: aqua tan violet peru; |
| | border-radius: 20px; |
| | } |
| | .rborder { |
| | background-color: #b1ccf3; |
| | width: 100px; height: 40px; line-height: 40px; |
| | border-radius: 20px; |
| | } |
| | .radio { |
| | width: 40px; height: 40px; |
| | border-radius: 50%; |
| | border: 10px solid; |
| | } |
| | .triangle1 { |
| | border: 50px solid #0001; |
| | border-left-color: red; |
| | } |
| | .triangle2 { |
| | border-left: 50px solid #0001; |
| | border-right: 50px solid #0001; |
| | border-bottom: 50px solid red; |
| | } |
| | style> |
![image.png](https://img-blog.csdnimg.cn/img_convert/d8c2a33d02a1e274edf938b95292047d.png#clientId=ufacd6738-718e-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=117&id=u8e25ec48&margin=[object Object]&name=image.png&originHeight=117&originWidth=624&originalType=binary&ratio=1&rotation=0&showTitle=false&size=8367&status=done&style=stroke&taskId=u4b09681a-0116-418c-9ee7-244775e553c&title=&width=624)
01、< svg>矢量图形
< svg>可缩放矢量图形(Scalable Vector Graphics,SVG),是一种基于 XML(数学)描述的二维的矢量图形,内容可以直接插入网页,成为DOM的一部分,然后用 JavaScript 和 CSS 进行操作。SVG 内容也可以写在一个独立文件中,然后用CSS(background-url)、![]()
、、、来引用。
大多数现代浏览器都支持SVG 图形,越来越多的项目在使用SVG图形,简单的像图标,复杂的一些图表Chart也有不少是基于SVG实现的。相比于位图,体积更小,可无线缩放而不失真。
比较 | 矢量图形 | 位图 |
---|---|---|
存储的数据 | 存储元素、算法数据 | 存储像素数据 |
存储大小 | 小 | 大 |
缩放效果 | 无线缩放,不失真 | 固定大小,放大会失真 |
可维护性 | 很容易修改 | 修改麻烦 |
扩展性 | 支持CSS、JS | 不支持 |
文件格式 | .svg ,直接嵌入数据到页面 |
.bmp /.png /.jpg /.gif ,< img>可嵌入svg文件 |
支持的元素 | 、、、 | 、 |
兼容性 | IE9开始支持 | 较好 |
渲染性能 | 复杂的SVG会占用很多时间 | 稳定 |
网络传输性能 | 和页面数据一起,体积小,速度快 | 需单独请求图片资源 |
缓存 | 随网页内容一起,不可单独缓存 | 图片可单独缓存 |
1.1、< svg>元素
内部支持多种图形算法,基础的如线line
、圆形、矩形rect
、文本text
,复杂的有折线polyline
、多边形polygon
、路径数据path
等。这些图形都以子元素的形式组合,因此也就都支持CSS、JS的操作了。iconfont-阿里巴巴矢量图标库上有非常丰富的< svg>矢量图形。
元素/属性 | 描述< |
---|