美文网首页
canvas圆圈双向旋转

canvas圆圈双向旋转

作者: 羞答答_aff1 | 来源:发表于2017-06-07 18:47 被阅读0次
    <!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;
    
            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();
    
            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
                }
            ];
            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;
    
            });
    
            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
                }
            ]
    
            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();
    
            var angleSpeed = 60; 
            var animation = new Konva.Animation(function(frame){
                var angleDiff = angleSpeed * frame.timeDiff / 1000;
            
                bigCircleGroup.rotate(angleDiff);
                bigCircleGroup.getChildren().each(function(val, index){
                    val.rotate(-angleDiff);
                }) 
    
                
                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) {
            
                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;
    
                var group = new Konva.Group({
                    x:options.x,
                    y:options.y
                })
    
                var circle = new Konva.Circle({
                    x:0,
                    y:0,
                    radius:options.innerRadius,
                    fill:options.innerFill
                });
                group.add(circle);
    
                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>
    

    相关文章

      网友评论

          本文标题:canvas圆圈双向旋转

          本文链接:https://www.haomeiwen.com/subject/pweafxtx.html