利用HTML5自定义绘制正在加载图案(spinner)

来源：互联网发布：sas有几个软件编辑：程序博客网时间：2024/05/27 14:12

这几天自己在学习HTML5，看到很多新的元素，总感觉手痒痒，就想自己写一个，今天想起曾经一个项目里用的正在加载图案(spinner)是用的插件，所以自己就像要用canvas绘制一个。

初学HTML5，程序肯定有不完美的地方！！

思路就是绘制一个简单的图形，然后让图形以一个点为中心按一定的速率旋转！

添加canvas元素：

您的浏览器版本太老，不支持这个控件

</canvas>

绘制图形：

效果如下：

这个很简单，相信用过canvas的都会绘制

//旋转时内圆的半径
    var radiusinner = 60,
    //旋转时外圆的半径
        radiusoutter = 120,
        //每一个花瓣的宽度
        spinwidth = 30,
        //花瓣的数量
        spinnum = 12;

    var canvas = document.getElementById("canvas");
    var context2D = canvas.getContext("2d");

    //为了方便，用于获取长方形的起点坐标
    var s_height = radiusoutter - radiusinner - spinwidth;
    var s_width = spinwidth;
    var s_x = 0 - spinwidth/2
    var s_y = 0 - (radiusoutter - s_width / 2);;

    context2D.translate(radiusoutter, radiusoutter);//改变坐标系的坐标原点
    //用于生成图案中的一个
    function create() {
        context2D.beginPath();
        context2D.arc(0, s_y, s_width/2, 0, Math.PI * 2, true);
        context2D.arc(0, s_y + s_height, s_width/2, 0, Math.PI * 2, true);
        context2D.closePath();
        context2D.fillStyle = "#fff";
        context2D.fill();
        context2D.fillRect(s_x, s_y, s_width, s_height);
    }

我觉得这段程序中，对我学习影响最大的是改变坐标系坐标原点这个地方，最开始的时候，坐标系原点默认的是canvas控件的左上角，但是在图像旋转的时候，是已控件的左上角为参考的，而这里想要的是外圆的圆点处作为旋转的参考点，所以，提前将坐标系的圆点改变，这样方便下面的旋转。

旋转图形：

var snum = 0;
    function move() {
        context2D.clearRect(-120, -120, 500, 500);
        snum = snum === spinnum ? 0 : snum;
        snum++;
        var angle = (snum * 360 / spinnum) * Math.PI / 180;
        context2D.save();
        context2D.rotate(angle);
        create();
        context2D.restore();
    }

    var i = setInterval(move, 30);

这样，就可以自定义完成一个简单的图形！

0 0