HTML5 Canvas 八星聚义动态效果

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

昔有石碣村七星聚义，今有Canvas八星聚义。动态效果是，八颗星以等速螺线慢慢向中心聚集，最后汇聚成一颗。

效果：

代码：

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>八星聚义</title>
    </head>

     <body onload="draw()">
        <canvas id="myCanvus" width="400px" height="400px" style="border:1px dashed black;">
            出现文字表示你的浏览器不支持HTML5
        </canvas>
     </body>
</html>
<script type="text/javascript">
<!--
function draw(){
        var canvas=document.getElementById('myCanvus');
        canvas.height=;
        canvas.width=;
        var context=canvas.getContext('2d');

        context.translate(,);// 原点移到中央

        ){
            setInterval(function(){ run(context); }, );
        }
};

;// 角度
;// 与圆心的举例

function run(context){
        context.clearRect(-,-,,);// 清除图案

        context.strokeStyle = "black";

        // 横轴
        context.beginPath();
        context.moveTo(-, );
        context.lineTo(,);
        context.stroke();
        context.closePath();

       // 纵轴
        context.beginPath();
        context.moveTo(, );
        context.lineTo(,-);
        context.stroke();
        context.closePath();

        // 大圈
        context.strokeStyle='black';
        context.beginPath();
        context.arc(,,,,*Math.PI,false);
        context.closePath();
        context.stroke();

        // 小圈
        context.strokeStyle='black';
        context.beginPath();
        context.arc(,,,,*Math.PI,false);
        context.closePath();
        context.stroke();

        ){
            delta+=;// 角度每次加十
            distance-=0.4;// 举例每次减去十

            ;i<;i++){
                context.save();

                context.rotate(getRad(i*));
                context.translate(distance*Math.sin(getRad(delta)),distance*Math.cos(getRad(delta)));

                context.save();
                context.rotate(getRad(-i*));
                drawFiveStar(context,,,,getColor(i));
                context.restore();

                context.restore();
            }

        }else{
            distance=;
            delta=;

            context.save();
            context.translate(distance*Math.sin(getRad(delta)),distance*Math.cos(getRad(delta)));

            drawFiveStar(context,,,,'black');

            context.restore();
        }
}

// 角度得到弧度
function getRad(degree){
        *Math.PI;
}

// 得到颜色
function getColor(index){
    ){
        return "red";
    }){
        return "navy";
    }){
        return "green";
    }){
        return "yellow";
    }){
        return "pink";
    }){
        return "orange";
    }){
        return "olive";
    }){
        return "rose";
    }
}

// 绘制五角星，多角星都可以由这个方法变化而来
function drawFiveStar(context,x,y,r,color){
    context.strokeStyle = color;
    context.fillStyle = color;

    context.translate(x,y);

    ;i<;i++){
        context.save();
        context.rotate(getRad(/*i));

        context.beginPath();
        context.moveTo(, -r);
        context.lineTo(-Math.tan(getRad())*r, );
        context.lineTo(Math.tan(getRad())*r,);
        context.lineTo(, -r);
        context.fill();
        context.stroke();
        context.closePath();
        context.restore();
    }
}

//-->
</script>