对于canvas的绘制,首先须要在html内指定一块画布,即<canvas></canvas>, 能够看作是在PS中新建一个空白文档,以后全部的操做都将呈如今这个文档之上,与PS的区别是,canvas自己没有图层的特性,当须要展现不一样维度的视图时,须要交由html的位置关系来解决。html
canvas标签上,值得一提的就是width和height两个属性,这两个属性表明着画布的宽高,与canvas样式上的宽高有很大区别。在浏览器当中,看到的图形绘制大小,自己是由canvas.style.width/canvas.style.height决定的,他们决定了canvas这个dom元素的大小关系,而canvas.width和canvas.height决定的是canvas内部图形的大小关系。当这两个宽高比不一样时,就会产生视觉上的形变。即,把canvas.style.height放大为2倍时,显示效果会被拉伸:ios
当不设置样式宽高时,浏览器中canvas大小由画布大小决定(在实际开发中,碰到一个例外,是在使用mapbox时,绘制map的标签若是只设置canvas画布大小时,在ios移动端的浏览器上显示异常,PC正常)。canvas
所谓上下文,表明的就是一个环境,在这个环境当中你能够获取到相关的方法,变量。程序中有上下文,html的媒体中也有上下文,好比音频上下文(AudioContext),只有拿到了上下文,才能进行相关的方法操做,canvas也是如此,canvas上的方法都是借由canvas上下文获得。api
<canvas id="leftCanvas"></canvas> const canvasL = document.getElementById("leftCanvas"); const cxtL = canvasL.getContext("2d");
本次圆弧动画须要用到的上下文属性有:浏览器
角度计算以前,先介绍一下绘制圆弧的基础api arc。dom
ctx.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);
这个函数能够接收6个参数,前五个为必填,分别为圆心x坐标,圆心y坐标,半径,起始角度,结束角度,方向(默认为false,顺时针)。函数
回到圆弧动画,当前动画有两段,以顺时针方向这段为例。动画
顺时针方向圆弧初始配置为:spa
cxtL.arc(WidthL / 2, HeightL / 2, WidthL / 2 - 5, -1 / 2 * Math.PI, 1 / 6 * Math.PI, false);
window.requestAnimationFrame()code
借助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");
这样就可使画布适应不一样屏幕大小。
如下为未整理代码,较乱,仅供参考。