简易绘制大众汽车Logo

$(document).ready(function() {

    $("#nav_txt").find("li").eq(0).css("opacity",1);

    $.fn.fullpage({

        anchors: ['page1', 'page2', 'page3', 'page4','page5','page6'],

        navigation: true,

        afterLoad: function (anchorLink, index) {

            $("#nav_txt").find("li").eq(index-1).css("opacity",1);

            $("#nav_txt").find("li").eq(index-1).siblings().css("opacity",0);

            if (index == 2) {

                setTimeout(draw,100);

            }

            else if (index == 3) {

                $(".langrui_page3 p").animate({opacity:1},1000);

            }

            else if (index == 4) {

                $(".langrui_page4 p").animate({opacity:1},1000);

            }

            else if (index == 5) {

                $(".langrui_page5 p").animate({opacity:1},1000);

                $(".langrui_page5 .iphone_l").addClass("animateUp1");

                $(".langrui_page5 .num1").addClass("animateUp1");

                $(".langrui_page5 .iphone_c").addClass("animateUp2");

                $(".langrui_page5 .num2").addClass("animateUp2");

                $(".langrui_page5 .iphone_r").addClass("animateUp3");

                $(".langrui_page5 .num3").addClass("animateUp3");

            }

            else if (index ==6) {

                $(".langrui_page6 p").animate({opacity:1},1000);

            }

 

            if(index==5){

                $("#fullPage-nav span").addClass("huise");

                $(".nav_txt ul li p").addClass("color_d9");

            }

            else {

                $("#fullPage-nav span").removeClass("huise");

                $(".nav_txt ul li p").removeClass("color_d9");

            }

        }

    });

});

var c=document.getElementById("canvas"),ctx;

var drawRight,drawLeft,drawUp,drawDown ,drawLeftBottom,drawRightBottom;

var cWidth=c.width,cHeight=c.height;

function  draw() {

    if(c.getContext){

        ctx=c.getContext("2d");

        ctx.strokeStyle="#fff";

        ctx.lineWidth=1;

        ctx.beginPath();

        ctx.moveTo(0,0);

 

        drawLineFromLTR(0,0,cWidth);

        drawColDownLine(cWidth,0,cHeight);

        setTimeout(function () {

            drawColUpLine(0,cHeight,cHeight);

            drawLineFromRTL(cWidth,cHeight,cWidth)

        },534);

        setTimeout(function () {

            ctx.moveTo(0,469);

            drawLineFromLTR(0,469,cWidth);

            },1068);

        setTimeout(function () {

            ctx.moveTo(211,220);

            actiondo();

        },1400);

 

        setTimeout(function () {

            ctx.moveTo(212,78);

            drawColDownLine(212,78,36);

        },3400);

 

        setTimeout(function () {

            drawLineLeftBottom(212,220,88,288 );

            drawLineRightBottom(212,220,336,288);

            setTimeout(function () {

                $("#rect_c").addClass("line_bg");

                $(".rect").animate({opacity:1},1000);

                $(".langrui_page2 p").animate({opacity:1},1500);

            },500)

        },4000);

        ctx.closePath();

    }else {

        var benz= document.getElementById("rect_c");

        benz.style.backgroundImage='url(//img.orvibo.com/guanwang_second/front/images/products/langrui/benz.png)';

        benz.style.backgroundRepeat="no-repeat";

        benz.style.backgroundPosition="center center";

    }

}

function drawLineLeftBottom(startX,startY, endX,endY) {

    var iLen=0;

    drawLeftBottom=setInterval(toLeftBottom,1);

    function toLeftBottom() {

        if(iLen<9){

            ctx.moveTo(startX,startY);

            ctx.lineTo(startX-15.5*iLen,startY+8.5*iLen);

            iLen++;

            ctx.stroke();

        }else {

            clearInterval(drawLeftBottom);

        }

    }

}

function drawLineRightBottom(startX,startY,endX,endY) {

    var iLen=0;

    drawRightBottom=setInterval(toRightBottom,1);

    function toRightBottom() {

        if(iLen<9){

            ctx.moveTo(startX,startY);

            ctx.lineTo(startX+15.5*iLen,startY+8.5*iLen);

            iLen++;

            ctx.stroke();

        }else {

            clearInterval(drawRightBottom);

        }

    }

}

//从右向左划线

function drawLineFromRTL(startX,startY,length){

    var iLen = 0;

    drawLeft= setInterval(rowLeftLine,1);

    function rowLeftLine(){

        if(iLen<=length){

            ctx.moveTo(startX,startY);

            ctx.lineTo( startX-iLen*4,startY);

            iLen++;

            ctx.stroke();

        }

        else{

            clearInterval(drawLeft);

        }

    }

}

//从左向右划线

function drawLineFromLTR(startX,startY,length){

    var iLen = 0;

    drawRight= setInterval(rowRightLine,1);

    function rowRightLine(){

        if(iLen<=length){

            ctx.moveTo(startX,startY);

            ctx.lineTo(iLen*4 + startX,startY);

            iLen++;

            ctx.stroke();

        }else{

            clearInterval(drawRight);

        }

    }

}

//动态画向上竖线

function drawColUpLine(startX,startY,length){

    var iLen = 0;

    drawUp= setInterval(colUpLine,1);

    function colUpLine(){

        if(iLen<=length){

            ctx.moveTo(startX,startY);

            ctx.lineTo(startX,startY- iLen*4);

            iLen++;

            ctx.stroke();

        }

        else {

            clearInterval(drawUp);

        }

    }

}

//动态画向下竖线

function drawColDownLine(startX,startY,length){

    var iLen = 0;

    drawDown=setInterval(colDownLine,1);

    function colDownLine(){

        if(iLen<=length){

            ctx.moveTo(startX,startY);

            ctx.lineTo(startX,iLen*4 +startY);

            iLen++;

            ctx.stroke();

        }

        else {

            clearInterval(drawDown);

        }

    }

 

}

counterClockwise = false;

var x, y, radius, animation_interval = 20,n = 100;

var varName, step, startAngle, endAngle, add=Math.PI*2/100;

function actiondo(){

    step=1;

    startAngle=0;

    ctx.strokeStyle ='#fff';

    //圆心位置

    x=212;

    y=220;

    radius = 142;

    varName= setInterval(animation, animation_interval);

}

var animation = function () {

    if (step <= n) {

        endAngle = startAngle + add ;

        drawArc(startAngle, endAngle);

        startAngle = endAngle;

        step++;

    } else {

        clearInterval(varName);

 

    }

};

function drawArc(s, e) {

    ctx.beginPath();

    ctx.arc(x, y, radius, s, e, counterClockwise);

    ctx.lineWidth = 1.0;

    ctx.stroke();

}