canvas、svg

1.数据可视化初步

1.1 什么是数据可视化：

数据可视化，是关于数据视觉表现形式的科学技术研究

数据可视化的理论基础：计算机图形学

1.2 浏览器实现数据可视化架构：

1.3 数据可视化基础核心技术

1.3.1 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

  在线编辑器(http://www.zuohaotu.com/svg/)

  通过UI设计工具（AI,stretch）来生成

• svg具体如何绘制基本图形

  • 绘制一条线段

  
  
  其中：
    x1,y1:第一个点的坐标
    x2,y2:第二个点的坐标
    stroke:设置边框的颜色
  

  • 矩形

  
  
  其中：
  	x,y为矩形左上角坐标
  	width,height:矩形宽度和高度
  	fill:填充颜色
  	stroke:边框颜色
  

  • 画圆

  
  
  其中：
  	x,y为圆心坐标
  	r:圆半径
  	fill:填充颜色
  	stroke:边框颜色
  
  

  • 椭圆

  Ellipse 是circle元素更通用的形式，你可以分别缩放圆的x半径和y半径

  • 多边图形

  第一种：折线 polyline
    
    
  第二种:多边形 polygon
  
  
  
  polygon和polyline区别:
     它们都是由连接一组点集的直线构成。不同的是，polygon的路径在最后一个点处自动回到第一个点
  
  

  • 路径：path

  
     
    
  
  
  
  
  
  
  其中：
     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)
   
   
  
  说明:
    最后一个坐标(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