h5 canvas 绘制的写轮眼特效

来源：互联网发布：面试淘宝美工常见问题编辑：程序博客网时间：2024/04/30 06:17
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>$</title></head><body><canvas id="canvas" width="800" height="600" style="border:1px solid red"></canvas></body><script src="jquery-2.1.4.js"></script><script>    var colors = (function () {        return ( "aliceblue,antiquewhite,aqua,aquamarine,azure,beige,bisque,black,blanchedalmond,blue," +        "blueviolet,brown,burlywood,cadetblue,chartreuse,chocolate,coral,cornflowerblue,cornsilk," +        "crimson,cyan,darkblue,darkcyan,darkgoldenrod,darkgray,darkgreen,darkgrey,darkkhaki,darkmagenta," +        "darkolivegreen,darkorange,darkorchid,darkred,darksalmon,darkseagreen,darkslateblue,darkslategray," +        "darkslategrey,darkturquoise,darkviolet,deeppink,deepskyblue,dimgray,dimgrey,dodgerblue,firebrick," +        "floralwhite,forestgreen,fuchsia,gainsboro,ghostwhite,gold,goldenrod,gray,green,greenyellow,grey," +        "honeydew,hotpink,indianred,indigo,ivory,khaki,lavender,lavenderblush,lawngreen,lemonchiffon," +        "lightblue,lightcoral,lightcyan,lightgoldenrodyellow,lightgray,lightgreen,lightgrey,lightpink," +        "lightsalmon,lightseagreen,lightskyblue,lightslategray,lightslategrey,lightsteelblue,lightyellow," +        "lime,limegreen,linen,magenta,maroon,mediumaquamarine,mediumblue,mediumorchid,mediumpurple," +        "mediumseagreen,mediumslateblue,mediumspringgreen,mediumturquoise,mediumvioletred,midnightblue," +        "mintcream,mistyrose,moccasin,navajowhite,navy,oldlace,olive,olivedrab,orange,orangered,orchid," +        "palegoldenrod,palegreen,paleturquoise,palevioletred,papayawhip,peachpuff,peru,pink,plum,powderblue," +        "purple,rebeccapurple,red,rosybrown,royalblue,saddlebrown,salmon,sandybrown,seagreen,seashell,sienna," +        "silver,skyblue,slateblue,slategray,slategrey,snow,springgreen,steelblue,tan,teal,thistle,transparent," +        "tomato,turquoise,violet,wheat,white,whitesmoke,yellow,yellowgreen" ).split(',');    })(); //颜色集合    var canvas = document.getElementById("canvas");    var ctx = canvas.getContext("2d");    function Chain(opt) {/*        if (!opt) throw new Error("请设置相关参数");        if(!opt.ctx) throw new Error("请传递上下文");        if(!opt.bigX) throw new Error("请传递大圆圆心x");        if(!opt.bigY) throw new Error("请传递大圆圆心y");        var _defaultOpt={            num: 5,            start: 0,            bigRadius:150,            smallRadius:10        };        $.extend(this,_defaultOpt,opt);*/        for(var key in opt){            this[key] = opt[key];        }        this.drawChain();    }    Chain.prototype = {        constructor: Chain,        drawChain: function () {            this.drawBigCircle();            this.drawSmallCircles();        },        drawBigCircle: function () {            var ctx = this.ctx;            ctx.beginPath();            //绘制大圆            ctx.arc(this.bigX, this.bigY, this.bigRadius, 0, 2 * Math.PI);            ctx.stroke();        },        drawSmallCircles: function () {            //绘制小圆            var radian = 2 * Math.PI / 5;            for (var i = 0; i < this.num; i++) {                var smallRadian = this.start + radian * i;                this.drawSmallCircle(smallRadian,this.color[i*10+10]);            }        },        drawSmallCircle: function (smallRadian,color) {            var b = this.bigRadius * Math.cos(smallRadian);            var h = this.bigRadius * Math.sin(smallRadian);            var sX = this.bigX + b;            var sY = this.bigY + h;            var ctx = this.ctx;            this.ctx.fillStyle = this.color;            ctx.beginPath();            ctx.arc(sX, sY, this.smallRadius, 0, 2 * Math.PI);            ctx.fillStyle = color;            ctx.fill();        }    };    var start = 0;    var start2 = 1;    var bigR = 150;    var scale = true;    var timer = setInterval(function () {        ctx.clearRect(0, 0, canvas.width, canvas.height);        new Chain({            ctx:ctx,            bigX:300,            bigY:300,            bigRadius:bigR,            num:5,            smallRadius:10,            start:start,            color:colors        });        new Chain({            ctx:ctx,            bigX:300,            bigY:300,            bigRadius:300,            num:20,            smallRadius:30,            start:start2,            color:colors        });        if(scale){            bigR--;            if(bigR == 10){                scale = false;            }        }else{            bigR++;            if(bigR == 150){                scale = true;            }        }        start2 += 0.002*Math.PI;        start += 0.01 * Math.PI;    }, 100);</script></html>
0 0