首页手记 html5canvas绘制动画圆环

html5canvas绘制动画圆环

标签：

Html/CSS Html5 JavaScript

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body,canvas{ margin: 0; padding: 0;}
            #canvas{ display: block; border: 1px solid #000; margin: 10px auto;}
        </style>
    </head>
    <body>
        <canvas id="canvas">
            当前浏览器不支持Canvas，请下载最新的浏览器！
        </canvas>
        <script>
            window.onload = function(){
                var m2 = 1;
                var timer = null;
                //获取画布的对象
                var canvas = document.getElementById("canvas");
                //设置canvas上下文环境
                var context = canvas.getContext('2d');
                //设置画布的宽高
                canvas.width = '400';
                canvas.height = '400';

                //运用定时器对圆环的终止弧度进行动态增加
                timer = setInterval(function(){
                    m2 = m2+0.05;
                    if (m2 >= 2) {
                        m2 = 2;
                        //当弧度大于设定的弧度清除定时器
                        clearInterval(timer);
                    }
                    context.clearRect(0,0,400,400);//每次进行绘制前，把之前绘制的图像删除掉
                    drawArc( context,m2);//调用绘制圆环的方法
                },40);
            }

            //自定义一个绘制圆环的方法
            var drawArc = function(txt,m2){
                txt.strokeStyle = '#f89f97';
                txt.lineWidth = '4';
                txt.beginPath();
                txt.arc(200,200,100,1*Math.PI,m2*Math.PI,false);
                txt.stroke();
                txt.closePath();
            }
        </script>
    </body>
</html>

点击查看更多内容