结果预览
canvas 绘制基本流程
初始画布
关于canvas的绘制，起首须要在html内指定一块画布，即<canvas></canvas>, 能够看作是在PS中新建一个空缺文档，以后一切的操纵都将显现在这个文档之上，与PS的区分是，canvas自身没有图层的特征，当须要展现差别维度的视图时，须要交由html的位置关联来处理。
canvas标签上，值得一提的就是width和height两个属性，这两个属性代表着画布的宽高，与canvas款式上的宽高有很大区分。在浏览器当中，看到的图形绘制大小，自身是由canvas.style.width/canvas.style.height决议的，他们决议了canvas这个dom元素的大小关联，而canvas.width和canvas.height决议的是canvas内部图形的大小关联。当这两个宽高比差别时，就会发生视觉上的形变。即，把canvas.style.height放大为2倍时，显现结果会被拉伸：
当不设置款式宽高时，浏览器中canvas大小由画布大小决议(在现实开辟中，遇到一个破例，是在运用mapbox时，绘制map的标签假如只设置canvas画布大小时，在ios挪动端的浏览器上显现非常，PC平常)。
猎取上下文
所谓上下文，代表的就是一个环境，在这个环境当中你能够猎取到相干的要领，变量。顺序中有上下文，html的媒体中也有上下文，比方音频上下文（AudioContext）,只要拿到了上下文，才举行相干的要领操纵，canvas也是云云，canvas上的要领都是借由canvas上下文获得。
<canvas id="leftCanvas"></canvas>
const canvasL = document.getElementById("leftCanvas");
const cxtL = canvasL.getContext("2d");
设置线条
本次圆弧动画须要用到的上下文属性有：
- lineCap 线段端点外形，本次设置为round
- lineWidth 线宽
- strokeStyle 线条添补色彩
- clearRect 消灭画布内里的内容
- beginPath 在画布上最先一段新的途径
- arc 圆弧绘制参数设置
- stroke 绘制
角度盘算
角度盘算之前，先引见一下绘制圆弧的基本api arc。
ctx.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);
这个函数能够吸收6个参数，前五个为必填，分别为圆心x坐标，圆心y坐标，半径，肇端角度，完毕角度，方向（默以为false,顺时针）。
回到圆弧动画，当前动画有两段，以顺时针方向这段为例。
- x, y:在canvas当中，坐标系默许以左上角为原点，假如想让圆弧动画以画布中心点扭转，能够将圆心点设置为画布中心点，即画布长宽的1/2,假定设置的画布长宽均为100，那末圆心点的坐标即为(50, 50)，这个圆就绘制在了画布中心。
- radius:为了不与画布发生切角，半径设置比画布平常略小，。
- startAngle:肇端角度为正北方向，而圆以x轴程度方向为0度，因而将肇端点逆时针扭转90°，即：-1 / 2 * Math.PI。
- endAngle:由于圆弧长度为30°，尽头角度在肇端角度的基本上增添 1 / 6 * Math.PI。
顺时针方向圆弧初始设置为：
cxtL.arc(WidthL / 2, HeightL / 2, WidthL / 2 - 5, -1 / 2 * Math.PI, 1 / 6 * Math.PI, false);
开启动画
window.requestAnimationFrame()
借助requestAnimationFrame，来对canvas圆弧举行不停的重绘，每次重绘canvas之前清空画布，每轮动画方向角偏移2°，即2 / 180 * Math.PI，动画完毕的标记为圆弧尽头的角度，挪动至3 / 2 * Math.PI，当满足前提时，挪用window.cancelAnimationFrame(animationId)作废动画。
屏幕适配
经由过程进入html后，动态猎取视口，来设置canvas宽高，比方愿望画布大小为窗口的宽度的15%，能够经由过程
const clientWidth = document.documentElement.clientWidth;
const canvasWidth = Math.floor(clientWidth * 0.15);
const canvasL = document.getElementById("leftCanvas");
canvasL.setAttribute("width", canvasWidth + "px");
如许就能够使画布顺应差别屏幕大小。
以下为未整理代码，较乱，仅供参考。
