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

来源：互联网发布：装潢预算软件编辑：程序博客网时间：2024/05/01 23:15

之前我写过使用css3制作圆形加载的动画，但是很麻烦。这几天我突然发现使用canvas还更加的简单，为什么我不用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>

阅读全文

0 0