html5使用canvas画布制作圆形加载动画

时间:2021-03-23 17:09:33

之前我写过使用css3制作圆形加载的动画,但是很麻烦。这几天我突然发现使用canvas还更加的简单,为什么我不用canvas做呢?

所以,趁着今天有时间,赶紧的整理一下思路,书写了一个简单的案例。

html5使用canvas画布制作圆形加载动画

这个相对于css3的好处就是,没有那个bug,css3的上下会有一点淡淡的颜色边,而canvas绘制出来的没有bug还很简单。所以,我就写了一个简单的案例。

兼容性方面,canvas兼容到了ie9,和css3一样,所以,这两种方法用哪种都一样。

思路:

首先获取到canvas的2d的上下文。

然后书写了一个draw方法和index下标,index代表当前的已经旋转到的角度,每次调用draw方法index自增。

最后写了一个定时器进行定时的调用,然后就完成了效果。

下面是案例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="mycanvas" style="height: 500px; width:500px;" width="500" height="500"></canvas>
</body>
<script>
    var canvas = document.getElementById("mycanvas");

    var ctx = canvas.getContext("2d");
    var index = 0;


    function draw() {
        index++;
        if (index > 360) {
            index = 0;
        }
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        ctx.arc(250, 250, 200, Math.PI / 180 *270,  Math.PI / 180  * (index+270));
        ctx.strokeStyle = "green";
        ctx.lineWidth=100;
        ctx.stroke();
    }

    setInterval(function () {
        draw();
    }, 10000/360);
</script>
</html>