动画与Canvas图形

发表于 更新于 分类于 阅读次数：

这篇博客记录下红宝书上的canvas和动画

Js动画

早起的Js动画只能用定时器写，结合css的animation和transition来完成，但定时器在浏览器的时间精度是个问题，就会造成动画不流畅，延时等问题，所以这里就有新的API来解决这个问题

requestAnimationFrame

requesetAnimationFrame()，该接口的参数是一个函数(就是用于执行动画的函数)，该接口的作用就是通知浏览器“我要放一个动画你麻溜的准备好”，然后调用参数函数来精确的完成动画。然后参数函数是一个要在重绘屏幕前调用的函数，这个函数就是修改DOM样式以及反映下一次重绘有什么变化的地方。为了实现动画循环，可以再该函数内部再次调用requesetAnimationFrame()。
至此，该API解决了浏览器不知道Js何时开始动画的问题，然后在调用requesetAnimationFrame()时还给执行动画的函数传递一个DOMHighResTimeStamp函数，就是一个时间戳，表示下次重绘的时间，这一点非常重要，requesetAnimationFrame()把重绘任务安排再了未来一个已知的时间点上，而且通过这个参数告诉了开发者。

然后requesetAnimationFrame()的返回值和setTimeout()类似，返回一个请求ID，通过cancelAnimationFrame()来取消重绘任务

1
2
3
4
5
6
7
8
9
10
11
12
13
const updateProgress = () => {
  let div = document.getElementById("status");
  div.style.width = (parseInt(div.style.width, 10) + 5) + '%'
  if (div.style.left != "100%") {
    requesetAnimationFrame(updateProgress)
  }
}
requesetAnimationFrame(updateProgress) 

const id = requesetAnimationFrame(updateProgress) 

cancelAnimationFrame(id)

在使用requesetAnimationFrame()要注意节流的使用

Canvas

canvas是html的标签元素，写它的时候要声明id,width和height

相关API

基础API

  • getContext() 获取绘图上下文，比如传参’2d’，就表示要获取2D上下文对象
  • toDataURL() 导出canvas元素上的图像

绘制矩形

对于2d上下文对象，会建一个坐标系，然后根据坐标来绘图
坐标原点在canvas元素的左上角，然后width和height就限定了坐标的最大值，2d绘图有两个基本操作，填充和描边

  • strokeStyle() 用于描边
  • fillStyle() 用于填充
    绘制矩形的API，都接受四个参数，分别是起始x,y坐标和宽度高度
  • fillRect() 填充矩形
  • strokeRect() 绘制矩形边框
  • clearRect() 擦除指定区域

绘制路径的API

  • beginPath() 表示开始绘制路径
  • closePath() 表示关闭绘制路径 图形绘制命令又重新指向到上下文中
  • stroke() 通过线条来绘制图形轮廓
  • fill() 通过填充路径的内容区域生成实心的图形
    意思就是 创建路径之后，可以用closePath()方法绘制一条返回起点的线，如果路径已经完成，就可以用fill()或者stroke()方法来描画路径，还可以调用clip()方法基于已有路径创建一个新剪切区域。
  • arc() 绘制弧线，参数啥的去MDN查吧，
  • arcTo()
  • bezierCurveTo() 三次贝塞尔曲线
  • quadraticCurveTo() 二次贝塞尔曲线
  • rect() 绘制矩形 与前面的矩形相关API的区别是绘制路径和绘制图形
  • lineTo(x,y) 绘制一条从上一点到(x,y)的直线
  • moveTo(x,y) 不绘制线条，只把绘制光标移动到(x,y)
    还有个isPointInPath(x,y)方法帮我们判断目前路径是否在某点(x,y)上

绘制文本

绘制文本的方法，都接受四个参数,要绘制的字符串，x坐标，y坐标，和可选的最大像素宽度。

  • fillText()
  • strokeText()

这两个方法最终绘制都取决于以下属性

  • font: css语法指定的字体样式
  • textAlign: 指定文本对齐方式
  • textBaseLine: 指定文本的基线

用measureText()获得文本的宽度

变换、

。。。
写不下去了
太多API了赣