用canvas实现围绕旋转动画

来源：互联网发布：dailyview网络温度计编辑：程序博客网时间：2024/05/16 15:57

使用canvas的convas来实现围绕旋转动画，外圈顺时针，里层逆时针

代码demo链接地址代码demo链接地址

html文件

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        body {            margin: 0;            padding: 0;            overflow: hidden;            background-color: #f0f0f0;        }    </style>    <script src="js/konva.js"></script>    <script src="js/circle.js"></script></head><body><div id="cas"></div><script>    var width = window.innerWidth;    var height = window.innerHeight;    //创建舞台    var stage = new Konva.Stage({        container: "cas",        width: width,        height: height    });    //创建层    var layer = new Konva.Layer();    //创建组1    var group = new Konva.Group({        x: stage.width() / 2,        y: stage.height() / 2,    });    //最外层圆    var circle1 = new Konva.Circle({        x: 0,        y: 0,        radius: 250,        stroke: "#ccc",        strokeWidth: 1,        dash: [6, 3]    });    group.add(circle1);    //第二个圆    var circle2 = new Konva.Circle({        x: 0,        y: 0,        radius: 150,        stroke: "#ccc",        strokeWidth: 1,        dash: [6, 3]    });    group.add(circle2);    //第三个圆    var circle3 = new Konva.Circle({        x: 0,        y: 0,        radius: 135,        stroke: "blue",        strokeWidth: 2,        dash: [10, 5]    });    group.add(circle3);    //第四个圆    var circle4 = new Konva.Circle({        x: 0,        y: 0,        radius: 105,        fill: "#ccc",        opacity: 0.4    });    group.add(circle4);    //第五个圆    var circle5 = new Konva.Circle({        x: 0,        y: 0,        radius: 80,        fill: "#74A2F0"    });    group.add(circle5);    //添加文字    var text = new Konva.Text({        x: -80,        y: -12,        text: "WEB全栈",        fill: "white",        fontSize: 24,        width: 160,        align: "center"    });    group.add(text);    layer.add(group);    //*****************************************************    //创建组2    var outGroup = new Konva.Group({        x: stage.width() / 2,        y: stage.height() / 2,    });    var arrColor = ["red", "green", "blue", "orange", "purple"];    var arrText = ["web", "node.js", "ajax", "html5", "css"];    for(var i = 0; i < 5; i++) {        var cir = new Circle({            x : 250 * Math.cos(72 * i * Math.PI / 180), //圆心x轴的坐标            y : 250 * Math.sin(72 * i * Math.PI / 180), //圆心y轴的坐标            outR :  60,  //外圆的半径            inR :  50,    //内圆的半径            fill : arrColor[i],  //填充颜色            text: arrText[i],    //文字            outOpacity : 0.3,   //外圆的透明度            inOpacity : 0.6      //内圆的透明度        });        cir.drawCircle(outGroup);    }    layer.add(outGroup);    //***********************************************    //创建组3    var inGroup = new Konva.Group({        x: stage.width() / 2,        y: stage.height() / 2,    });    var arrColor = ["red", "green", "blue", "orange", "purple"];    var arrText = ["web", "node.js", "ajax", "html5", "css"];    for(var i = 0; i < 5; i++) {        var cir = new Circle({            x : 135 * Math.cos(90 * i * Math.PI / 180), //圆心x轴的坐标            y : 135 * Math.sin(90 * i * Math.PI / 180), //圆心y轴的坐标            outR :  45,  //外圆的半径            inR :  35,    //内圆的半径            fill : arrColor[i],  //填充颜色            text: arrText[i],    //文字            outOpacity : 0.3,   //外圆的透明度            inOpacity : 0.6      //内圆的透明度        });        cir.drawCircle(inGroup);    }    layer.add(inGroup);    //************************************************    //运动动画    var step = 1; //转动的角度    var anim = new Konva.Animation(function() {        outGroup.rotate(step);        outGroup.getChildren().each(function (ele, index) {            ele.rotate(-step);        });        inGroup.rotate(-step);        inGroup.getChildren().each(function (ele, index) {                ele.rotate(step);        });    }, layer);    anim.start();    stage.add(layer);    stage.on("mouseover", function () {        step = 0.3;    });    stage.on("mouseout", function () {        step = 1;    });</script></body></html>

js文件

function Circle(obj) {    this._init(obj);}Circle.prototype = {    _init: function (obj) {        this.x = obj.x, //圆心x轴的坐标        this.y = obj.y, //圆心y轴的坐标        this.outR =  obj.outR,  //外圆的半径        this.inR =  obj.inR,    //内圆的半径        this.color = obj.fill,  //填充颜色        this.text = obj.text,   //内圆的文字        this.outOpacity = obj.outOpacity,   //外圆的透明度        this.inOpacity = obj.inOpacity      //内圆的透明度    },    drawCircle: function (group) {        //创建一个组        var groupCir = new Konva.Group({            x: this.x,            y: this.y        });        //外圆        var outCir = new Konva.Circle({            x: 0,            y: 0,            radius: this.outR,            fill: this.color,            opacity: this.outOpacity        });        groupCir.add(outCir);        //内圆        var inCir = new Konva.Circle({            x: 0,            y: 0,            radius: this.inR,            fill: this.color,            opacity: this.inOpacity        });        groupCir.add(inCir);        //添加文字        var text = new Konva.Text({            x: -this.inR,            y: -10,            text: this.text,            fill: "white",            fontSize: 20,            width: 2 * this.inR,            align: "center"        });        groupCir.add(text);        group.add(groupCir);    }}

效果图片：

0 0