canvas星體環(huán)繞動(dòng)畫(huà)實(shí)例

效果圖

2017-06-08_114036.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="box"></div>
    <script src="../bower_components/konva/konva.js"></script>
    <script>

        var stage = new Konva.Stage({
            container:"box",
            width:window.innerWidth,
            height:window.innerHeight
        });

        //定義變量
        var cx = 400;
        var cy = 400;
        var bigRadius = 240;
        var middleRadius = 160;
        var centerRadius = 80;


        //創(chuàng)建背景層
        var bgLayer = new Konva.Layer();
        stage.add(bgLayer);


        //大圈
        var bigCircle = new Konva.Circle({
            x:cx,
            y:cy,
            radius:bigRadius,
            stroke:"#ccc",
            dash:[10,2]
        });
        bgLayer.add(bigCircle);

        //中圈
        var middleCircle = new Konva.Circle({
            x:cx,
            y:cy,
            radius:middleRadius,
            stroke:"#ccc",
            dash:[10,2]
        });
        bgLayer.add(middleCircle);

        //中心
        var centerCircle = new CircleText({
            x:cx,
            y:cy,
            innerRadius:centerRadius,
            outerRadius:centerRadius+30,
            innerFill:"#369",
            outerFill:"#ddd",
            text:"WEB前端",
            fontSize:18,
            fontWeight:"bold",
            fontFill:"#fff",
            fontX:-35,
            fontY:-9

        });
        bgLayer.add(centerCircle);

        
        bgLayer.draw();



        //創(chuàng)建動(dòng)畫(huà)層
        var layer = new Konva.Layer();
        stage.add(layer);

        //最外圈的小球
        var bigCircleData = [
            {
                innerRadius:40,
                outerRadius:50,
                innerFill:"#5cb85c",
                outerFill:"#ddd",
                text:"HTML5",
                fontSize:14,
                fontX:-20,
                fontY:-7,
                opacity:.7
            },
            {
                innerRadius:40,
                outerRadius:50,
                innerFill:"#5bc0de",
                outerFill:"#ddd",
                text:"CSS3",
                fontSize:14,
                fontX:-20,
                fontY:-7,
                opacity:.7
            },
            {
                innerRadius:40,
                outerRadius:50,
                innerFill:"#f0ad4e",
                outerFill:"#ddd",
                text:"ECMA6",
                fontSize:14,
                fontX:-20,
                fontY:-7,
                opacity:.7
            },
            {
                innerRadius:40,
                outerRadius:50,
                innerFill:"#d9534f",
                outerFill:"#ddd",
                text:"jQuery",
                fontSize:14,
                fontX:-20,
                fontY:-7,
                opacity:.7
            },
            {
                innerRadius:40,
                outerRadius:50,
                innerFill:"#428bca",
                outerFill:"#ddd",
                text:"NodeJS",
                fontSize:14,
                fontX:-20,
                fontY:-7,
                opacity:.7
            }
        ];


        //創(chuàng)建一個(gè)組
        var bigCircleGroup = new Konva.Group({
            x:cx,
            y:cy
        });
        layer.add(bigCircleGroup); //把組添加到層中


        var angle = 0;
        var angleDiff = 360 / bigCircleData.length;

        bigCircleData.forEach(function(option, index){
            
            option.x = Math.cos(angle / 180 * Math.PI) * bigRadius;
            option.y = Math.sin(angle / 180 * Math.PI) * bigRadius;
            var circleText = new CircleText(option);

            bigCircleGroup.add(circleText); //添加到組中

            angle += angleDiff;

        });



        //繪制 中間圈的小球
        //定義數(shù)據(jù)
        var middleCircleData = [
            {
                innerRadius:30,
                outerRadius:40,
                innerFill:"purple",
                outerFill:"#ddd",
                text:"VueJS",
                fontSize:14,
                fontX:-20,
                fontY:-7,
                opacity:.7
            },
            {
                innerRadius:30,
                outerRadius:40,
                innerFill:"pink",
                outerFill:"#ddd",
                text:"Angle",
                fontSize:14,
                fontX:-20,
                fontY:-7,
                opacity:.7
            }
        ]

        //創(chuàng)建組
        var middleCircleGroup = new Konva.Group({
            x:cx,
            y:cy
        });
        layer.add(middleCircleGroup);

        //添加小圓圈
        var angle1 = 0;
        var angleDiff1 = 360 / middleCircleData.length;

        middleCircleData.forEach(function(option, index){
            
            option.x = Math.cos(angle1 / 180 * Math.PI) * middleRadius;
            option.y = Math.sin(angle1 / 180 * Math.PI) * middleRadius;
            var circleText = new CircleText(option);

            middleCircleGroup.add(circleText); //添加到組中

            angle1 += angleDiff1;

        });




        layer.draw();


        //兩個(gè)圈 要轉(zhuǎn)
        var angleSpeed = 60; //每秒鐘轉(zhuǎn)的角度
        var animation = new Konva.Animation(function(frame){
            var angleDiff = angleSpeed * frame.timeDiff / 1000;
            //外圈轉(zhuǎn)動(dòng)
            bigCircleGroup.rotate(angleDiff);
            bigCircleGroup.getChildren().each(function(val, index){
                val.rotate(-angleDiff);
            }) 

            //內(nèi)圈轉(zhuǎn)動(dòng)
            middleCircleGroup.rotate(-angleDiff);
            middleCircleGroup.getChildren().each(function(val, index){
                val.rotate(angleDiff);
            }) 

        }, layer);
        animation.start();


        //事件
        bigCircleGroup.on("mouseenter", function(){
            angleSpeed = 10;
        }).on("mouseleave touchend", function(){
            angleSpeed = 60;
        })


        /**
         * 生成帶文字的雙層圓
        */
        function CircleText(options) {
            //配置項(xiàng)
            options = options || {};
            options.x = options.x || 0;
            options.y = options.y || 0;
            options.innerRadius = options.innerRadius || 0;
            options.outerRadius = options.outerRadius || 0;
            options.innerFill = options.innerFill || "red";
            options.outerFill = options.outerFill || "#ddd";
            options.text = options.text || "小萍萍";
            options.fontFill = options.fontFill || "#fff";
            options.fontSize = options.fontSize || 16;
            options.fontWeight = options.fontWeight || "normal";
            options.fontFamily = options.fontFamily || "MicrosoftYaHei";
            options.fontX = options.fontX || 0;
            options.fontY = options.fontY || 0;
            options.opacity = options.opacity || 1;

            //創(chuàng)建組
            var group = new Konva.Group({
                x:options.x,
                y:options.y
            })

            //最中心的實(shí)心圓
            var circle = new Konva.Circle({
                x:0,
                y:0,
                radius:options.innerRadius,
                fill:options.innerFill
            });
            group.add(circle);

            //空心圓 圓環(huán)
            var ring = new Konva.Ring({
                x:0,
                y:0,
                innerRadius:options.innerRadius,
                outerRadius:options.outerRadius,
                fill:options.outerFill
            });
            group.add(ring);

            //文字
            var text = new Konva.Text({
                x:options.fontX,
                y:options.fontY,
                text:options.text,
                fill:options.fontFill,
                fontSize:options.fontSize,
                fontFamily:options.fontFamily,
                fontWeight:options.fontWeight
            });
            group.add(text);


            return group;


        }


    </script>
</body>
</html>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子栽渴,更是在濱河造成了極大的恐慌,老刑警劉巖舶治,帶你破解...
    沈念sama閱讀 216,591評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異车猬,居然都是意外死亡霉猛,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,448評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門(mén)珠闰,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)惜浅,“玉大人,你說(shuō)我怎么就攤上這事伏嗜√诚ぃ” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 162,823評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵承绸,是天一觀的道長(zhǎng)裸影。 經(jīng)常有香客問(wèn)我,道長(zhǎng)军熏,這世上最難降的妖魔是什么轩猩? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,204評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上均践,老公的妹妹穿的比我還像新娘晤锹。我一直安慰自己,他們只是感情好彤委,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,228評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布鞭铆。 她就那樣靜靜地躺著,像睡著了一般焦影。 火紅的嫁衣襯著肌膚如雪车遂。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 51,190評(píng)論 1 299
  • 那天斯辰,我揣著相機(jī)與錄音艰额,去河邊找鬼。 笑死椒涯,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的回梧。 我是一名探鬼主播废岂,決...
    沈念sama閱讀 40,078評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼狱意!你這毒婦竟也來(lái)了湖苞?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 38,923評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤详囤,失蹤者是張志新(化名)和其女友劉穎财骨,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體藏姐,經(jīng)...
    沈念sama閱讀 45,334評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡隆箩,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,550評(píng)論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了羔杨。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片捌臊。...
    茶點(diǎn)故事閱讀 39,727評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖兜材,靈堂內(nèi)的尸體忽然破棺而出理澎,到底是詐尸還是另有隱情,我是刑警寧澤曙寡,帶...
    沈念sama閱讀 35,428評(píng)論 5 343
  • 正文 年R本政府宣布糠爬,位于F島的核電站,受9級(jí)特大地震影響举庶,放射性物質(zhì)發(fā)生泄漏执隧。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,022評(píng)論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望殴玛。 院中可真熱鬧捅膘,春花似錦、人聲如沸滚粟。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,672評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)凡壤。三九已至署尤,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間亚侠,已是汗流浹背曹体。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,826評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留硝烂,地道東北人箕别。 一個(gè)月前我還...
    沈念sama閱讀 47,734評(píng)論 2 368
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像滞谢,于是被迫代替她去往敵國(guó)和親串稀。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,619評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容