1 动画相关

实现动画：

  • 定时器实现js动画
  • css过渡和动画
  • requestAnimationFrame 告诉浏览器要执行动画了，浏览器以最优方式确定重回的时序。

这里估计要链接 高性能动画，web中的高帧率。因为默认60hz 的话，是 1000/60 大约17ms ，这时候重绘视觉效果最好。

使用定时器的另一个问题是时间不精确，这里涉及到异步event loop，不解释。并且浏览器的自身定时器精度也有问题，比如在低版本ie中定时器精度最差可能到15ms，也就是说之后0和16ms+，没有中间值。如果切换到后台，会进一步冻结。结论是不够好。

因为产生了一个方法 requestAnimationFrame。

细节忽略，可以视为一个回调函数。此外还有 cancelAnimationFrame
image.png

其他忽略了。

2 Canvas

2.1 创建 canvas

创建canvas中必须设置width和height，这个其实宽高比例，通过css来控制真实宽高。也可以加入回退文案

这里我单独建立了一个repo https://gitee.com/xiaoxfa/tech-sharing/tree/master/share-repo/10-canvas

要绘制图形，首先要获得 ctx 上下文，这个上下文会有若干api用来绘制画布。

  1. let ctx = $('#canvas')?.getContext('2d');

canvas 可以导出为图片的：

  1. let imgURL = canvasDOM.toDataURL('image/png')
  2. let image = document.createElement('img')
  3. image.src = imgURL
  4. document.body.appendChild(image)

canvasDOM:

  • getContext('2d')获取上下文
  • toDataURL('image/png')导出图片

Canvas - 图2

2.2 操作上下文

如果获取了上下文，就可以进行绘制了，和绘图工具一样，提供矩形、弧形、路径。坐标默认从左上角作为 (0,0)开始。

  • 填充ctx.strokeStyle='red'，给范围填充颜色。
  • 描边ctx.fillStyle='red'，给范围边界描边样式。
  • 绘制矩形 ctx.fillRect(10,10,50,50) 绘制矩形填充，起点xy和终点xy
  • ctx.strokeRect(x,y,x,y) 绘制矩形描边
  • 清除 ctx.clearRect(x,y,x,y) 清除给定范围的内容，

具体看我demo01。

继续看demo02 绘制路径，这里的api比较多：

  • 先调用 beginPath() 开始绘制新路径。
  • ctx.arc(x,y,radius,开始角度,结束角度,是否逆时针算) ，以radius为半径画弧线，给定起始角度和结束角度
  • ctx.arcTo(x1,y1,x2,y2,radius) 以radius为半径，从a到b画一条弧线
  • ctx.bezierCurveTo(ax,ay,bx,by,cx,dy) 以a和b为控制点，画一条从上一点到c的弧线 三次贝塞尔曲线
  • ctx.lineTo(x,y)绘制从上一点到a的直线，但是起点不变
  • ctx.moveTo(x,y)移动绘制光标，不划线
  • ctx.quadraticCurveTo(cx,cy,x,y) 以a为控制点，画到b的二次贝塞尔曲线
  • ctx.rect(ax,ay,width,height)画矩形路径，而不是图形
  • ctx.isPointInPath(x,y)当前的点是否在路径上
  • 调用 closePath 结束
  1. // 从a点为圆心，向x轴方向，半径150，从0到90度，也就是1/4圆 ，顺时针
  2. ctx.arc(150, 150, 150, 0, 1 * Math.PI, false);
  3. // 画完上一步，还在 300,150呢
  4. ctx.moveTo(150, 150);

绘制文本，可以绘制文本

  • ctx.fillText(str,x,y,maxWidth?)
  • ctx.strokeText()
  • ctx.measureText() 计算当前字体

ctx的属性可以设定

  • font 设定字体样式、大小、字体
  • textAlign 设定文本的对齐方式
    • start end
    • left right center
  • textBaseLine 设定文本基线
    • top middle bottom
    • 其他的没啥用

变换，

  • rotate(angle)绕远点旋转
  • scale(x,y) 缩放
  • translate(x,y)移动
  • transform(a1,a2,b1,b2,dx,dy) 矩阵算法修改拉伸
  • setTransform(a1,a2,b1,b2,dx,dy)重置默认值，再调用 transform

保存：

  • save() 当前时刻的设置保存，存档
  • restore 读档，栈。

绘制图像 18.3.6

3 WebGL

忽略。