1.数据可视化初步
1.1 什么是数据可视化:
数据可视化,是关于数据视觉表现形式的科学技术研究
数据可视化的理论基础:计算机图形学
1.2 浏览器实现数据可视化架构:
1.3 数据可视化基础核心技术
1.3.1 canvas
<canvas id="box" width="800" height="400"></canvas>
1.注意:width和height最好canvas标签上添加,不要用css中的width,height
2.如何绘制常用图形
第一步: 获取canvas并创建绘图对象
//获取canvas标签,只是一个DOM对象
let box=document.getElementById('box')
//如果想操纵canvvas来绘图,必须调用getContext方法来创建ctx绘图对象
let ctx=box.getContext('2d')
第二步:绘制你需要的图形
1.绘制一条线段
开始绘制:ctx.beginPath()
绘制线宽:ctx.lineWidth=数值
起始位置:ctx.moveTo(x,y)
结束线段:ctx.lineTo(x,y)
关闭路径:ctx.closePath()
绘制线段:ctx.stroke()
填充图形:ctx.fill()
边框颜色:ctx.strokeStyle="十六进制或单词"
填充颜色:ctx.fillStyle="十六进制或单词"
思考一下:如何画一小点?
2.绘制矩形
绘制矩形边框:ctx.strokeRect(x, y, width, height)
填充矩形:ctx.fillRect(x, y, width, height)
清除矩形的一部分:ctx.clearRect(x, y, width, height)
3.绘制圆形 ctx.arc(横坐标, 纵坐标, 圆半径, 圆的起始度数(弧度), 圆的结束度数(弧度), 是顺时针还是逆时间针)
弧度制2π = 角度制360°
所以 弧度制1 =360°/(2π)=(180/π)°
角度制1°=2π/360=π/18
4.如何在画布上写字
实心填充字:fillText(text, x, y [, maxWidth])
空心字:strokeText(text, x, y [, maxWidth])
5.嵌入图片
ctx.drawImage(image, x, y)
1.3.2 svg
svg可缩放的矢量图形
- svg特点与其他图片格式的区别
- 图标:icon gif,jpg,png
- svg(放大不失真,可以通过css和js改变样式和交互)
svg:
<svg t="1620609337349" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1159" width="200" height="200"><path d="M816.4 545.1l0 337.4c0 28.7-23.2 51.9-51.9 51.9L609.2 934.4 609.2 673.9c0-14.3-11.6-25.9-25.9-25.9L427.6 648c-14.3 0-25.9 11.6-25.9 25.9l0 260.4L246.3 934.3c-28.7 0-51.9-23.2-51.9-51.9L194.4 545.1 142 545.1l0 389.1c0 28.7 16.7 51.9 45.4 51.9l221.1 0 0-0.8 45.1 0L453.6 686.9l103 0 0.8 298.3 45.1 0 0 0.8 221.1 0c28.7 0 45.4-23.2 45.4-51.9L869 545.1 816.4 545.1z" p-id="1160" fill="#515151"></path><path d="M505.4 63.8c-6.9 0-13.8 2.5-18.6 7.6L41.7 531.7c-10 10.3-9.7 26.7 0.6 36.7 5 4.9 11.5 7.3 18 7.3 6.8 0 13.6-2.6 18.7-7.9l426.4-441.1 426.4 441.1c5.1 5.3 11.9 7.9 18.6 7.9 6.5 0 13-2.4 18-7.3 10.3-10 10.6-26.4 0.6-36.7L524.1 71.3C519.2 66.3 512.3 63.8 505.4 63.8L505.4 63.8z" p-id="1161" fill="#515151"></path></svg>
-
如何生成svg
在线编辑器(http://www.zuohaotu.com/svg/)
通过UI设计工具(AI,stretch)来生成
-
svg具体如何绘制基本图形
- 绘制一条线段
<svg xmlns="http://www.w3.org/2000/svg"> <line x1="50" y1="30" x2="100" y2="100" style="stroke:red" /> </svg> 其中: x1,y1:第一个点的坐标 x2,y2:第二个点的坐标 stroke:设置边框的颜色
- 矩形
<svg xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="50" width="200" height="100" style="fill:red;stroke:blue;stroke-width:4" /> </svg> 其中: x,y为矩形左上角坐标 width,height:矩形宽度和高度 fill:填充颜色 stroke:边框颜色
- 画圆
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"> <circle cx="100" cy="100" r="80" style="fill:red;stroke:blue;stroke-width:6" /> </svg> 其中: x,y为圆心坐标 r:圆半径 fill:填充颜色 stroke:边框颜色
- 椭圆
Ellipse 是
circle
元素更通用的形式,你可以分别缩放圆的x半径和y半径<svg xmlns="http://www.w3.org/2000/svg"> <ellipse cx="200" cy="100" rx="150" ry="50" style="fill:orange" /> </svg>
- 多边图形
第一种:折线 polyline <svg xmlns="http://www.w3.org/2000/svg"> <polyline points="0 0,100 100,150 50,250 150,300,50" style="stroke:red;fill:none" /> </svg> 第二种:多边形 polygon <svg xmlns="http://www.w3.org/2000/svg"> <polygon points="0 0,100 100,150 120,180 50" style="fill:red;stroke:blue;stroke-width:2"/> </svg> polygon和polyline区别: 它们都是由连接一组点集的直线构成。不同的是,polygon的路径在最后一个点处自动回到第一个点
- 路径:path
<svg xmlns="http://www.w3.org/2000/svg"> <path d="M 10 10 L 100 10 L 100 100 L 10 100 L 10 10" style="stroke:red;fill:none" /> </svg> <svg xmlns="http://www.w3.org/2000/svg"> <!-- <path d="M 10 10 L 100 10 L 100 100 L 10 100 L 10 10" style="stroke:red;fill:none" /> --> <path d="M 10 10 l 90 0 l 0 90 l -90 0 l 0 -90" style="stroke:red;fill:none" /> </svg> <svg xmlns="http://www.w3.org/2000/svg"> <path d="M 10 10 L 100 10 L 100 100 L 10 100 Z" style="stroke:red;fill:none" /> <!-- <path d="M 10 10 l 90 0 l 0 90 l -90 0 z" style="stroke:red;fill:none" /> --> </svg> <svg xmlns="http://www.w3.org/2000/svg"> <path d="M 10 10 h 100 v 100 h -100 v -100" style="stroke:red;fill:none" /> </svg> 其中: d代表path要设置多个点的坐标集合 M:相当于canvas中的moveTO,表示移动某个坐标点开始画线 L:画线命令 绝对坐标,从svg左上角开始计算 l:画线命令 相对坐标,从当前坐标位置开始计算的 Z:自动闭合起点和终点 v:垂直画线 h:水平画线
- 贝赛尔曲线
三次贝塞尔曲线需要定义一个点和两个控制点,所以用C命令创建三次贝塞尔曲线,需要设置三组坐标参数 C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy) <svg xmlns="http://www.w3.org/2000/svg"> <path d="M10 10 C 140 20, 140 130, 100 160" stroke="red" fill="none"/> </svg> 说明: 最后一个坐标(x,y)表示的是曲线的终点,另外两个坐标是控制点,(x1,y1)是起点的控制点,(x2,y2)是终点的控制点。
-
svg sprites: svg 雪碧图-(参考授课视频)
1.3.3 css3 绘图
1.绘制矩形
2.绘制圆形
3.绘制椭圆
4.绘制三角
5.。。。
参考:https://www.webhek.com/post/40-css-shapes.html