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

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技术