canvas、svg

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