canvas动画的实现原理（canvas包含内置动画）

• 主要用到的函数也就是arc函数
• 实现的核心其实是增量，就是上次结束的弧度成为下次弧度的开始，便可以平滑过度。
• 关于动画，有个实现原理，就是一秒最少要20fps。（fps是帧）

效果图

 

一言不合贴的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>甜甜圈</title>
    <style> * { margin: 0; padding: 0; } </style>
</head>
<body>
    <canvas id="pan"></canvas>
</body>
<script> // 初始化函数 var pan = document.getElementById('pan') var width = window.outerWidth var height = window.outerHeight pan.width = width pan.height = height //绘画状态 let opts = { "start": Math.PI * 1.5, "end" : Math.PI * 3, "color": "red" } /** * 绘画圆弧 * @param options 配置文件 */ function drawPie (opts) { /** * @param startAngle 开始弧度 * @param endAngle 结束弧度 * @param timeAngle 每次绘制的弧度的增量 * @param sumAngle 总的绘制的弧度 * @param initStartAngle 一开始弧度和总增量的和 用于判断是否绘画完成 * @param vDraw 绘制的速度 50ms */ var startAngle = opts.start, endAngle = opts.end, timeAngle, sumAngle, initStartAngle, vDraw = 50; sumAngle = startAngle - endAngle if (sumAngle<0) { sumAngle = -sumAngle } initStartAngle = opts.start + sumAngle timeAngle = (sumAngle / 1000) * vDraw var ctx = pan.getContext("2d") // 弧度 = 角度 * Math.PI / 180 var timerHandle = setInterval(function () { /** * 应该获取到上次的结束的弧度，作为下次开始的弧度 **/ ctx.arc(width / 2, height /2, 50, opts.start, opts.start + timeAngle, false ) ctx.strokeStyle=opts.color ctx.lineWidth= 40 ctx.stroke() // 判断是否绘画到需要的点 if(initStartAngle >= opts.start + timeAngle) { opts.start = opts.start + timeAngle } else { console.log('end') clearInterval(timerHandle) } }, vDraw) } drawPie(opts) </script>
</html>

后记：
这个只是个简单的demo,线条的优化等，还有定时函数的替代函数requestAnimationFrame，毕竟js是单线程，同时使用两个高触发的定时函数，是很危险的事情，一不小心就会照成浏览器卡顿。也可以使用worker技术，开启多线程。不过我也没有用worker技术