绘图相关

svg

canvas

openGL -> webGL -> three.js

svg和canvas的比对： 1.svg可以无线拉伸 2.svg每次修改都要全部重新绘制，canvas是一个画布不需要 3.大数据量的时候基于2，canvas的性能更好

canvas - 画布

1. 绘制过程 准备container：

<canvas id='canvas'></canvas>

=> 画布选中和初始化(明确画布上下文、尺寸) => 利用api去做绘制

2. canvas api

• 路径的绘制

  • ctx.beginPath - 开始绘制的路径
  • ctx.moveTo(x,y) - 设置起点
  • ctx.lineTo(x,y) - 绘制一条到（x,y）的直线
  • ctx.closePath() - 闭合
  • ctx.stroke - 对路径进行着色
  • ctx.fill - 对路径区域进行填充

• 闭合矩形的区域绘制

  • ctx.rect(x,y,width,height) - 绘制矩形路径
  • ctx.strokeRect - 绘制闭合
  • ctx.fillRect - 绘制填充
  • ctx.clearRect - 清除矩形

• 曲线绘制

  • ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise) - 绘制圆形或者扇形

• 文本绘制

  • ctx.strokeText(string,x,y) - 绘制空心文字
  • ctx.fillText(string,x,y) - 绘制实心文字

• 填充阴影

  • ctx.shadowOffsetX - 阴影水平位移
  • ctx.shadowOffsetY - 阴影垂直唯一
  • ctx.shadowBlur - 模糊度
  • ctx.shadowColor - 阴影颜色

• 记忆处理

  • ctx.save - 保存上下文环境
  • ctx.restore - 回复上一次保存的上下文环境

对于canvas左上角是(0,0) 右下角是(x,y)

webGL

坐标系就是数学坐标系

着色器 - shader

// 1.顶点着色器
gl_postion(-0.5, 0.5, 0, 1)   // x , y , z, w   w表示位置信息

// 2.光栅
// 剔除 + 裁剪 不可见域

// 3.片元着色器
gl_FragColor

threejs

  // 1.场景
  var scene = new THREE.Scene();

  // 2.相机 - camera
  THREE.perspectiveCamera = function(fov, aspect, near, far)
  // fov - 视角
  // aspect - 横纵比
  // near
  // far

  var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight,1,1000)
  scene.add(camera)

  // 3. 渲染器 - renderer
  THREE.WebGL.Renderer()

  // 4. 几何对象 - Object
  // 主要绘制的主体

思考写一个echart

• 什么是DPI?
• 使用多少实际的屏幕像素来绘制单个css像素，由此在绘制的时候设置

this.dpi = window.devicePixelRatio || 1