SOURCE

    var H = window.innerHeight,W = window.innerWidth,sin = Math.sin,cos =Math.cos,PI = Math.PI;
    var _canvas = new Canvas("canvas",W,H);
    var canvas = _canvas.canvas,ctx = _canvas.ctx;

    // 
   
    ctx.strokeStyle = "#fff";
    ctx.arc(500,300,160,0,PI*2);
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.strokeStyle = "#f00";
    ctx.setLineDash([5,15])
    ctx.arc(500,300,260,0,PI*2);
    ctx.stroke();
    ctx.closePath();

    // 12个齿轮 绘制辅助线
    ctx.setLineDash([5,15])
    var num = 12;
    while(num--){
        var x = 500+260*sin(PI/6*num),y = 300+260*cos(PI/6*num)
        ctx.beginPath();
        ctx.strokeStyle = "#f00";
        ctx.moveTo(500.5,300);
        ctx.lineTo(x,y);
        ctx.stroke();
        ctx.closePath();
    }
    num = 96;
    while(num--){
        if(num%8 == 1 || num%8 == 7) {
            ctx.setLineDash([5,15])
            var x = 500+260*sin(PI/48*num),y = 300+260*cos(PI/48*num);
            ctx.beginPath();
            ctx.strokeStyle = "#f00";
            ctx.moveTo(500.5,300);
            ctx.lineTo(x,y);
            ctx.stroke();
            ctx.closePath();
            if(num%8 == 7) continue;
            ctx.setLineDash([0,0])
            var x1 = 500+260*sin(PI/48*(num-2)),y1 = 300+260*cos(PI/48*(num-2));
            ctx.beginPath();
            ctx.strokeStyle = "#fff";
            ctx.moveTo(x,y);
            ctx.lineTo(x1,y1);
            ctx.stroke();
            ctx.closePath();
       
            // 三次贝塞尔曲线
            ctx.setLineDash([0,0]);
            var x1 = 500+260*sin(PI/48*num),y1 = 300+260*cos(PI/48*num);
            var x2 = 500+200*sin(PI/48*(num+1)),y2 = 300+200*cos(PI/48*(num+1));
            var x3 = 500+195*sin(PI/48*(num+2)),y3 = 300+195*cos(PI/48*(num+2));
            var x4 = 500+190*sin(PI/48*(num+3)),y4 = 300+190*cos(PI/48*(num+3));
            ctx.beginPath();
            ctx.strokeStyle = "#fff";
            ctx.moveTo(x1,y1);
            ctx.bezierCurveTo(x2,y2,x3,y3,x4,y4);
            
            var x5 = 500+195*sin(PI/48*(num+4)),y5 = 300+195*cos(PI/48*(num+4));
            var x6 = 500+200*sin(PI/48*(num+5)),y6 = 300+200*cos(PI/48*(num+5));
            var x7 = 500+260*sin(PI/48*(num+6)),y7 = 300+260*cos(PI/48*(num+6));
            //ctx.beginPath();
            //ctx.strokeStyle = "#fff";
            //ctx.moveTo(x4,y4);
            ctx.bezierCurveTo(x5,y5,x6,y6,x7,y7);
            ctx.stroke();
            ctx.closePath();
        }
    }
    ctx.setLineDash([0,0])

    // 12齿8分齿轮
    function Gear(myctx,r,x0,y0,rotateSpeed){
        var sin = Math.sin,cos =Math.cos,PI = Math.PI,br = 1.5*r,num = 12*8,_x0 = x0,_y0 = y0;
        var pointMap  = [ 1.3*r, 1.25*r, 1.2*r, 1.25*r, 1.3*r,  br]
        myctx.beginPath();
       
        if(rotateSpeed) {
            myctx.translate(x0,y0);
            myctx.rotate(Math.PI/180*rotate);
            //console.log()
            x0=0;
            y0=0;
            
            
        }
        myctx.strokeStyle = "#fff";
        //num=1
        while(num--){
            if(num%8 == 1) {
                var xs = x0+br*sin(PI/48*(num)),ys = y0+br*cos(PI/48*(num));
                var xe = x0+br*sin(PI/48*(num-2)),ye = y0+br*cos(PI/48*(num-2));
                myctx.moveTo(xe,ye);
                myctx.lineTo(xs,ys);
                
                // 三次贝塞尔曲线
                for(var i in pointMap){
                    i = parseInt(i);
                    if(i==0 || i==3) {
                        myctx.bezierCurveTo(x0+sin(PI/48*(num+i+1))*pointMap[i],y0+cos(PI/48*(num+i+1))*pointMap[i],x0+sin(PI/48*(num+i+2))*pointMap[i+1],y0+cos(PI/48*(num+i+2))*pointMap[i+1],x0+sin(PI/48*(num+i+3))*pointMap[i+2],y0+cos(PI/48*(num+i+3))*pointMap[i+2])
                    }
                }
               
            }
        }
        myctx.stroke();
        myctx.closePath();
        if(rotateSpeed) {
            myctx.beginPath();
            myctx.rotate(-Math.PI/180*rotate);
            myctx.translate(-_x0,-_y0);
            myctx.moveTo(_x0+0.5,0);
            myctx.lineTo(_x0+0.5,H);
            myctx.stroke();
            myctx.moveTo(0,_y0+0.5);
            myctx.lineTo(W,_y0+0.5);
            myctx.stroke();
            myctx.closePath();
            rotate+=1;
            myctx.beginPath();
            myctx.fillStyle = "rgba(255,0,0,1)";
            myctx.arc(_x0,_y0,30,0,2*Math.PI)
            myctx.fill();
            myctx.closePath();
        }
        
        
    }
    
    
    var rotate = 1,x0=100,y0=300,dx = Math.random()*3,dy = Math.random()*3;
    function main(){
        ctx.clearRect(0,0,W,H);
        //Gear(ctx,20,200,300);
        // 旋转
        Gear(ctx,100,x0,y0,1);
        if(x0>W || x0<0) dx = -dx;
        if(y0>H || y0<0) dy = -dy;
        x0+=dx;
        y0+=dy;
        
        requestAnimationFrame(main)
    }
    main();
    function distans(x1,y1,x2,y2){
        return Math.sqrt(((x1-x2)*(x1-x2))+((y1-y2)*(y1-y2)));
    }

<script src="http://raw.githack.com/BiyugWv/codess/master/codes.js"></script>

<body>
    
</body>