面向对象版-卫星旋转案例

最新推荐文章于 2024-09-12 09:55:14 发布

python基础教程

最新推荐文章于 2024-09-12 09:55:14 发布

阅读量429

点赞数

分类专栏： 07canvas

本文链接：https://blog.youkuaiyun.com/stopcpp/article/details/53558737

版权

07canvas 专栏收录该内容

12 篇文章

订阅专栏

该博客通过面向对象编程技术详细介绍了如何模拟卫星围绕地球旋转的案例。使用JavaScript实现，包括CircleText.js文件，展示了具体的代码实现和最终的案例结果图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
    <title>面向对象版-卫星旋转webitcast案例</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            background-color: #f0f0f0;
            overflow: hidden;
        }
    </style>
    <script src="lib/js/konva/konva.js"></script>
    <script src="CircleText.js"></script>
</head>
<body>
    <div id="container">
    </div>
    <script>
    //第一步：创建舞台
    var stage = new Konva.Stage({
        container:'container',
        width:window.innerWidth,//全屏
        height:window.innerHeight,
    });
    //中心点坐标
    var cenX = stage.width()/2;
    var cenY = stage.height()/2;

    //创建背景层
    var bgLayer = new Konva.Layer();
    stage.add(bgLayer);

    //绘制背景
    var innerRadius = 252/2;
    var outerRadius = 220;

    //内圆
    var innerCicle = new Konva.Circle({
        x:cenX,
        y:cenY,
        radius:innerRadius,
        stroke:'#ccc',
        strokeWidth:4,
        dash:[10,4],//设置虚线 10px实线 4px空
    });
    bgLayer.add(innerCicle);//把矩形添加到层

    //外圆
    var outerCicle = new Konva.Circle({
        x:cenX,
        y:cenY,
        radius:outerRadius,
        stroke:'#ccc',
        strokeWidth:4,
        dash:[10,4],//设置虚线 10px实线 4px空
    });
    bgLayer.add(outerCicle);//把矩形添加到层

    //中心圆
    var cenCircleText = new CircleText({
        x:cenX,
        y:cenY,
        innerRadius:132/2,
        outerRadius:90,
        innerStyle:'#525a82',
        outerStyle:'#e1e1e1',
        text:'Web全栈111',
    });
    cenCircleText.addToGroupOrLayer(bgLayer);

    bgLayer.draw();

    //计算圆的圆心点坐标 
    var x0 = cenX + innerRadius*Math.cos(-60 * Math.PI/180);
    var y0 = cenY + innerRadius*Math.sin(-60 * Math.PI/180);

    //动画层的绘制
    var animateLayer = new Konva.Layer();
    stage.add(animateLayer);
    var L2Group = new Konva.Group({
        x:cenX,
        y:cenY,
    });


    //添加2环的圆1
    var L2_CircleText_CSS3 = new CircleText({
        x:innerRadius*Math.cos(160 * Math.PI/180),
        y:innerRadius*Math.sin(160 * Math.PI/180),
        innerRadius:30,
        outerRadius:40,
        innerStyle:'#FACED6',
        outerStyle:'#e1e1e1',
        text:'CSS3',
    });
    L2_CircleText_CSS3.addToGroupOrLayer(L2Group);

    //添加2环的圆2
    var L2_CircleText_HTML5 = new CircleText({
        x:innerRadius*Math.cos(-60 * Math.PI/180),
        y:innerRadius*Math.sin(-60 * Math.PI/180),
        innerRadius:30,
        outerRadius:40,
        innerStyle:'orange',
        outerStyle:'#e1e1e1',
        text:'HTML5',
    });
    L2_CircleText_HTML5.addToGroupOrLayer(L2Group);
    animateLayer.add(L2Group);

    //创建一个3环的组
    var L3_group = new Konva.Group({
        x:cenX,
        y:cenY
    });

    //绘制3环的圆
    var L3_CircleText_JS = new CircleText({
        x:outerRadius*Math.cos(60 * Math.PI/180),
        y:outerRadius*Math.sin(60 * Math.PI/180),
        innerRadius:40,
        outerRadius:50,
        innerStyle:'#91BFF8',
        outerStyle:'#e1e1e1',
        text:'JS',
    });
    L3_CircleText_JS.addToGroupOrLayer(L3_group);
    animateLayer.add(L3_group);

    animateLayer.draw();

    var rotateAnglePerSecond = 60;//每秒旋转60度
    //konva帧动画系统
    var animate = new Konva.Animation(function(frame){
        //每隔一会执行次方法，类似setInterval
        //计算当前帧需要旋转的角度
        var rotateAngle = rotateAnglePerSecond * frame.timeDiff / 1000; //上一帧和当前帧的时间差,毫秒

        L2Group.rotate(rotateAngle);//不是弧度，是角度
        //拿到所有二环上的圆的，内部组进行反向旋转
        L2Group.getChildren().each(function(item,index){
            item.rotate(-rotateAngle);
        });

        //三环逆旋转
        L3_group.rotate(-rotateAngle);
        L3_group.getChildren().each(function(item,index){
            item.rotate(rotateAngle);
        });
    },animateLayer);
    animate.start();//启动动画

    //Konva的事件系统，jQuery一样的
    animateLayer.on('mouseover',function(){
        rotateAnglePerSecond = 10;
    });
    animateLayer.on('mouseout',function(){
        rotateAnglePerSecond = 60;
    });

    </script>
</body>
</html>

CircleText.js

'use strict';
function CircleText(option){
    this._init(option);
}
CircleText.prototype = {
    _init:function(option){
        this.x = option.x || 0;
        this.y = option.y || 0;
        this.innerRadius = option.innerRadius || 0;
        this.outerRadius = option.outerRadius || 0;
        this.text = option.text || 'canvas';
        this.innerStyle = option.innerStyle || 'red';
        this.outerStyle = option.outerStyle || 'blue';

        this.group = new Konva.Group({
            x:this.x,
            y:this.y,
        });
        //初始化一个内部圆
        var innerCircle = new Konva.Circle({
            x:0,
            y:0,
            radius:this.innerRadius,
            fill:this.innerStyle,
            opacity:.8,
        });
        this.group.add(innerCircle);
        //初始化一个圆环
        var outerRing = new Konva.Ring({
            x:0,
            y:0,
            innerRadius:this.innerRadius,
            outerRadius:this.outerRadius,
            fill:this.outerStyle,
            opacity:.3,
        });
        this.group.add(outerRing);
        //初始化文字
        var text = new Konva.Text({
            x:0-this.outerRadius,
            y:-7,
            width:this.outerRadius*2,
            fill:'#fff',
            fontSize:18,
            text:this.text,
            align:'center',
        });

        this.group.add(text);
    },

    addToGroupOrLayer:function(arg){
        arg.add(this.group);
    }

}

案例结果图片：
这里写图片描述