Javascript 如何使用动态jquery方法在画布中旋转文本

我想在鼠标单击时将文本旋转360度。更多详情请参见下图

正如您在图像中看到的文本“ddddd”，我想根据鼠标点击旋转此文本。这是我的密码

//addtext() function is used to add the text to the container.
        $("ul#text #textsubmit").click(function(){
        addText();         
    });

function addText() {
           var text2 =  $('#texts').val();
           var fontfam = $('#fontfam').val();
           var colour = $('#colour').val();
           var textstroke = $('#textstroke').val();
           var width = document.getElementById("textcount").clientWidth;
           var height = document.getElementById("textcount").clientHeight;
           var length = text2.length;
           var rectwidth=width;


    var shapesLayer = new Kinetic.Layer();
        //add group
        var group = new Kinetic.Group({
        draggable: true
        });

      if(font==undefined)
        { var font=30; }

          if(x==undefined)
           {var x=250;}

         if(y==undefined)
            {var y=55;}

           var complexText = new Kinetic.Text({
              x: x,
              y: y,
              text: text2,
              fontSize: font,
              fontFamily: fontfam,
              textFill: colour,
              textStroke: textstroke
            });

         stage.add(shapesLayer);

         if(rectheight==undefined)
          { var rectheight=50; } 

       if(rectwidth==undefined)
         { var rectwidth=250; } 

        var rectx=250;
        var recty=40;

        var rect = new Kinetic.Rect({ //Rectangle is made as per the name size for increase and descrease size
          x: rectx,
          y: recty,
          width: rectwidth,
          height: rectheight,
          fill: "transparent",
          stroke: "red",
          strokeWidth: 1
        });    

        var recttrx=width+243;
        var recttry=32;
        var recttr= new Kinetic.Rect({ //recttr is used to create the right top corner of the rectangle
          x: recttrx,
          y: recttry,
          width: 15,
          height: 15,
          fill: "blue",
          stroke: "green",
          strokeWidth: 1
        });    

        var rectbrx=width+243;
        var rectbry=82;     
        var rectbr= new Kinetic.Rect({ //rectbr is used to create the right bottom corner of the rectangle
          x: rectbrx,
          y: rectbry,
          width: 15,
          height: 15,
          fill: "yellow",
          stroke: "pink",
          strokeWidth: 1
        });    

        var recttlx=243;
        var recttly=32; 
        var recttl= new Kinetic.Rect({ //recttl is used to create the left top corner of the rectangle
          x: recttlx,
          y: recttly,
          width: 15,
          height: 15,
          fill: "orange",
          stroke: "white",
          strokeWidth: 1
        });  

        var rectblx=243;
        var rectbly=82;     
        var rectbl= new Kinetic.Rect({ //rectbl is used to create the left bottom corner of the rectangle
          x: rectblx,
          y: rectbly,
          width: 15,
          height: 15,
          fill: "black",
          stroke: "red",
          strokeWidth: 1
        })  



rect.on("mouseover dragmove", function() {
           var shapesLayer = this.getLayer();
           document.body.style.cursor = "move";
           recttl.setFill("black"); 
           recttl.setStroke("red"); 
           rectbl.setFill("black"); 
           rectbl.setStroke("red");
           rectbr.setFill("black"); 
           rectbr.setStroke("red");
           recttr.setFill("black"); 
           recttr.setStroke("red");
           rect.setStrokeWidth(1);
           rect.setStroke("black");        
           shapesLayer.draw();
        writeMessage(messageLayer, "Double Click To Remove Or Edit Text");
})

rect.on("mouseout", function() {
           var shapesLayer = this.getLayer();
           document.body.style.cursor = "default";
           recttl.setFill("transparent"); 
           recttl.setStroke("transparent"); 
           rectbl.setFill("transparent"); 
           rectbl.setStroke("transparent");
           rectbr.setFill("transparent"); 
           rectbr.setStroke("transparent");
           recttr.setFill("transparent"); 
            recttr.setStroke("transparent");
           rect.setStrokeWidth(0);
           rect.setStroke("transparent");
           shapesLayer.draw();
            writeMessage(messageLayer, ""); 
})


   complexText.on("click", function(){
   alert();
   var layer = this.getLayer();
       angle=getRandomInt(1,4);

       text.transitionTo({
         rotation:Math.PI*angle/2,
         duration:1 

       });
       layer.draw();
       });
complexText.on("mouseover dragmove", function() {
           var shapesLayer = this.getLayer();
           document.body.style.cursor = "move";
           recttl.setFill("black"); 
           recttl.setStroke("red"); 
           rectbl.setFill("black"); 
           rectbl.setStroke("red");
           rectbr.setFill("black"); 
           rectbr.setStroke("red");
           recttr.setFill("black"); 
           recttr.setStroke("red");
           rect.setStrokeWidth(1);
           rect.setStroke("black");        
           shapesLayer.draw();
           writeMessage(messageLayer, "Drag Corners Increse Or Decrease Text Size"); 
})
complexText.on("mouseout", function() {
           var shapesLayer = this.getLayer();
           document.body.style.cursor = "default";
           recttl.setFill("transparent"); 
           recttl.setStroke("transparent"); 
           rectbl.setFill("transparent"); 
           rectbl.setStroke("transparent");
           rectbr.setFill("transparent"); 
           rectbr.setStroke("transparent");
           recttr.setFill("transparent"); 
           recttr.setStroke("transparent");
           rect.setStrokeWidth(0);
           rect.setStroke("transparent");
           shapesLayer.draw();
             writeMessage(messageLayer, "");
})
        group.add(complexText);
        group.add(rectbl);      
        group.add(recttr);
        group.add(rectbr);
        group.add(recttl);
        group.add(rect);
        shapesLayer.add(group);
        shapesLayer.draw();

        //bottom right square move start
          rectbr.on("mousedown.event1 dragmove", function () {
          var shapesLayer = this.getLayer();
          rectbr.moveToTop();
          document.body.style.cursor = "nw-resize";
          rectbr.setFill("red");
          var mousePos = stage.getMousePosition();
          var xpos=mousePos.x;
          var ypos=mousePos.y;
          shapesLayer.draw();
          //drag br
          group.on("dragmove.event2", function () {       
          var shapesLayer = this.getLayer();
          document.body.style.cursor = "nw-resize";
          rectbr.setFill("blue");   
          //start  mouse position and font size 
          var dragmousePos = stage.getMousePosition();
          var dragxpos=dragmousePos.x;
          var dragypos=dragmousePos.y;

            if(dragypos > ypos)//drag increase
           {   
            if(font>50)
       {complexText.setFontSize(50);
       writeMessage(messageLayer, "Maximum Font Size Reached");
       complexText.setFontSize(font);  }
             else {
             font=(font + 1); 

        complexText.setFontSize(font);
         var textwidth=complexText.getTextWidth(); 
             rectwidth=(textwidth);
             rectbrx=244+textwidth;
             recttrx=244+textwidth;
             x=x+0;
             y=y-0.5;

          complexText.setPosition(x ,y);
          rect.setWidth(rectwidth);
          rect.setHeight(rectheight);
          rectbr.setPosition(rectbrx, rectbry);
          rectbl.setPosition(rectblx, rectbly);
          recttl.setPosition(recttlx, recttly);      
          recttr.setPosition(recttrx, recttry); 
          rect.setPosition(rectx, recty);
          writeMessage(messageLayer, "");
                               }
            }
            if(dragypos < ypos)//drag increase
           {   

            if(font<21)
       {complexText.setFontSize(20);
       writeMessage(messageLayer, "Minimum Font Size Reached");
       complexText.setFontSize(font);  }
             else {
             font=(font-1); 

        complexText.setFontSize(font);
         var textwidth=complexText.getTextWidth(); 
             rectwidth=(textwidth);
             rectbrx=rectblx+textwidth;
             recttrx=recttlx+textwidth;
             x=x+0;
             y=y+0.5;

          complexText.setPosition(x ,y);
          rect.setWidth(rectwidth);
          rect.setHeight(rectheight);
          rectbr.setPosition(rectbrx, rectbry);
          rectbl.setPosition(rectblx, rectbly);
          recttl.setPosition(recttlx, recttly);      
          recttr.setPosition(recttrx, recttry); 
          rect.setPosition(rectx, recty);
          writeMessage(messageLayer, "");
                               }
            }
          shapesLayer.draw();
          })
          })
          //end bottom right square


          //bottom left square move start
          rectbl.on("mousedown.event1 dragmove", function () {
          var shapesLayer = this.getLayer();
          rectbl.moveToTop();
          document.body.style.cursor = "nw-resize";
          rectbl.setFill("red");
          var mousePos = stage.getMousePosition();
          var xpos=mousePos.x;
          var ypos=mousePos.y;
          shapesLayer.draw();
          //drag br
          group.on("dragmove.event2", function () {       
          var shapesLayer = this.getLayer();
          document.body.style.cursor = "nw-resize";
          rectbl.setFill("blue");   
          //start  mouse position and font size 
          var dragmousePos = stage.getMousePosition();
          var dragxpos=dragmousePos.x;
          var dragypos=dragmousePos.y;

            if(dragypos > ypos)//drag increase
           {   
            if(font>50)
       {complexText.setFontSize(50);
       writeMessage(messageLayer, "Maximum Font Size Reached");
       complexText.setFontSize(font);  }
             else {
             font=(font + 1); 

        complexText.setFontSize(font);
         var textwidth=complexText.getTextWidth(); 
             rectwidth=(textwidth);
             rectbrx=244+textwidth;
             recttrx=244+textwidth;
             x=x+0;
             y=y-0.5;

          complexText.setPosition(x ,y);
          rect.setWidth(rectwidth);
          rect.setHeight(rectheight);
          rectbr.setPosition(rectbrx, rectbry);
          rectbl.setPosition(rectblx, rectbly);
          recttl.setPosition(recttlx, recttly);      
          recttr.setPosition(recttrx, recttry); 
          rect.setPosition(rectx, recty);
          writeMessage(messageLayer, "");
                               }
            }
            if(dragypos < ypos)//drag increase
           {   

            if(font<21)
       {complexText.setFontSize(20);
       writeMessage(messageLayer, "Minimum Font Size Reached");
       complexText.setFontSize(font);  }
             else {
             font=(font-1); 

        complexText.setFontSize(font);
         var textwidth=complexText.getTextWidth(); 
             rectwidth=(textwidth);
             rectbrx=rectblx+textwidth;
             recttrx=recttlx+textwidth;
             x=x+0;
             y=y+0.5;

          complexText.setPosition(x ,y);
          rect.setWidth(rectwidth);
          rect.setHeight(rectheight);
          rectbr.setPosition(rectbrx, rectbry);
          rectbl.setPosition(rectblx, rectbly);
          recttl.setPosition(recttlx, recttly);      
          recttr.setPosition(recttrx, recttry); 
          rect.setPosition(rectx, recty);
          writeMessage(messageLayer, "");
                               }
            }
          shapesLayer.draw();
          })
          })
          //end bottom left square

          //top left right square move start
          recttl.on("mousedown.event1 dragmove", function () {
          var shapesLayer = this.getLayer();
          recttl.moveToTop();
          document.body.style.cursor = "nw-resize";
          recttl.setFill("red");
          var mousePos = stage.getMousePosition();
          var xpos=mousePos.x;
          var ypos=mousePos.y;
          shapesLayer.draw();
          //drag br
          group.on("dragmove.event2", function () {       
          var shapesLayer = this.getLayer();
          document.body.style.cursor = "nw-resize";
          recttl.setFill("blue");   
          //start  mouse position and font size 
          var dragmousePos = stage.getMousePosition();
          var dragxpos=dragmousePos.x;
          var dragypos=dragmousePos.y;

            if(dragypos > ypos)//drag increase
           {   
            if(font>50)
       {complexText.setFontSize(50);
       writeMessage(messageLayer, "Maximum Font Size Reached");
       complexText.setFontSize(font);  }
             else {
             font=(font + 1); 

        complexText.setFontSize(font);
         var textwidth=complexText.getTextWidth(); 
             rectwidth=(textwidth);
             rectbrx=244+textwidth;
             recttrx=244+textwidth;
             x=x+0;
             y=y-0.5;

          complexText.setPosition(x ,y);
          rect.setWidth(rectwidth);
          rect.setHeight(rectheight);
          rectbr.setPosition(rectbrx, rectbry);
          rectbl.setPosition(rectblx, rectbly);
          recttl.setPosition(recttlx, recttly);      
          recttr.setPosition(recttrx, recttry); 
          rect.setPosition(rectx, recty);
          writeMessage(messageLayer, "");
                               }
            }
            if(dragypos < ypos)//drag increase
           {   

            if(font<21)
       {complexText.setFontSize(20);
       writeMessage(messageLayer, "Minimum Font Size Reached");
       complexText.setFontSize(font);  }
             else {
             font=(font-1); 

        complexText.setFontSize(font);
         var textwidth=complexText.getTextWidth(); 
             rectwidth=(textwidth);
             rectbrx=rectblx+textwidth;
             recttrx=recttlx+textwidth;
             x=x+0;
             y=y+0.5;

          complexText.setPosition(x ,y);
          rect.setWidth(rectwidth);
          rect.setHeight(rectheight);
          rectbr.setPosition(rectbrx, rectbry);
          rectbl.setPosition(rectblx, rectbly);
          recttl.setPosition(recttlx, recttly);      
          recttr.setPosition(recttrx, recttry); 
          rect.setPosition(rectx, recty);
          writeMessage(messageLayer, "");
                               }
            }
          shapesLayer.draw();
          })
          })
          //end bottom top left square


                //top right square move start
          recttr.on("mousedown.event1 dragmove", function () {
          var shapesLayer = this.getLayer();
          recttr.moveToTop();
          document.body.style.cursor = "nw-resize";
          recttr.setFill("red");
          var mousePos = stage.getMousePosition();
          var xpos=mousePos.x;
          var ypos=mousePos.y;
          shapesLayer.draw();
          //drag br
          group.on("dragmove.event2", function () {       
          var shapesLayer = this.getLayer();
          document.body.style.cursor = "nw-resize";
          recttr.setFill("blue");   
          //start  mouse position and font size 
          var dragmousePos = stage.getMousePosition();
          var dragxpos=dragmousePos.x;
          var dragypos=dragmousePos.y;

            if(dragypos > ypos)//drag increase
           {   
            if(font>50)
       {complexText.setFontSize(50);
       writeMessage(messageLayer, "Maximum Font Size Reached");
       complexText.setFontSize(font);  }
             else {
             font=(font + 1); 

        complexText.setFontSize(font);
         var textwidth=complexText.getTextWidth(); 
             rectwidth=(textwidth);
             rectbrx=244+textwidth;
             recttrx=244+textwidth;
             x=x+0;
             y=y-0.5;

          complexText.setPosition(x ,y);
          rect.setWidth(rectwidth);
          rect.setHeight(rectheight);
          rectbr.setPosition(rectbrx, rectbry);
          rectbl.setPosition(rectblx, rectbly);
          recttl.setPosition(recttlx, recttly);      
          recttr.setPosition(recttrx, recttry); 
          rect.setPosition(rectx, recty);
          writeMessage(messageLayer, "");
                               }
            }
            if(dragypos < ypos)//drag increase
           {   

            if(font<21)
       {complexText.setFontSize(20);
       writeMessage(messageLayer, "Minimum Font Size Reached");
       complexText.setFontSize(font);  }
             else {
             font=(font-1); 

        complexText.setFontSize(font);
         var textwidth=complexText.getTextWidth(); 
             rectwidth=(textwidth);
             rectbrx=rectblx+textwidth;
             recttrx=recttlx+textwidth;
             x=x+0;
             y=y+0.5;

          complexText.setPosition(x ,y);
          rect.setWidth(rectwidth);
          rect.setHeight(rectheight);
          rectbr.setPosition(rectbrx, rectbry);
          rectbl.setPosition(rectblx, rectbly);
          recttl.setPosition(recttlx, recttly);      
          recttr.setPosition(recttrx, recttry); 
          rect.setPosition(rectx, recty);
          writeMessage(messageLayer, "");
                               }
            }
          shapesLayer.draw();
          })
          })
          //end top right square 


          //end square
                rect.on("dblclick", function(){
           //   group.remove(complexText);
 var shapesLayer=this.getLayer();
 group.remove(complexText);
  group.remove(rect);
   group.remove(recttl);
    group.remove(recttr);
     group.remove(rectbl);
      group.remove(rectbr);
 shapesLayer.clear();
   shapesLayer.draw();
   });

   complexText.on("dblclick", function(){
        var shapesLayer=this.getLayer();
        group.remove(complexText);
        group.remove(rect);
          group.remove(recttl);
    group.remove(recttr);
     group.remove(rectbl);
      group.remove(rectbr);
 shapesLayer.clear();
   shapesLayer.draw();
   });
          //start dragging
    group.on("dragend", function() {
            rectbr.off("dragmove.event1");
            group.off("dragmove.event2");
            document.body.style.cursor = "default";
            }, false)


       group.on("dragend", function() {
            rectbl.off("dragmove.event1");
            group.off("dragmove.event2");
            document.body.style.cursor = "default";
            }, false)

       group.on("dragend", function() {
            recttl.off("dragmove.event1");
            group.off("dragmove.event2");
            document.body.style.cursor = "default";
            }, false)   

       group.on("dragend", function() {
            recttr.off("dragmove.event1");
            group.off("dragmove.event2");
            document.body.style.cursor = "default";
            }, false)
       //end dragging

      rectbr.on("mouseout", function () {
          var shapesLayer = this.getLayer();
          rectbr.setFill("#black");
            rectbr.off("dragmove.event1");
            group.off("dragmove.event2");
             document.body.style.cursor = "default";
          shapesLayer.draw();
            })
            rectbl.on("mouseout", function () {
          var shapesLayer = this.getLayer();
          rectbl.setFill("#black");
            rectbl.off("dragmove.event1");
            group.off("dragmove.event2");
             document.body.style.cursor = "default";
          shapesLayer.draw();
            })
            recttr.on("mouseout", function () {
          var shapesLayer = this.getLayer();
          recttr.setFill("#black");
            recttr.off("dragmove.event1");
            group.off("dragmove.event2");
             document.body.style.cursor = "default";
          shapesLayer.draw();
            })
            recttl.on("mouseout", function () {
          var shapesLayer = this.getLayer();
          recttl.setFill("#black");
            recttl.off("dragmove.event1");
            group.off("dragmove.event2");
             document.body.style.cursor = "default";
          shapesLayer.draw();
            })

    rectbr.on("mouseover dragmove", function () {
           var shapesLayer = this.getLayer();
           rect.setStrokeWidth(1);
           rect.setStroke("black");  
           recttl.setFill("black"); 
           recttl.setStroke("red"); 
           rectbl.setFill("black"); 
           rectbl.setStroke("red");
           rectbr.setFill("black"); 
           rectbr.setStroke("red");
           recttr.setFill("black"); 
           recttr.setStroke("red");
           rect.setStrokeWidth(1);
           rect.setStroke("black");        
           shapesLayer.draw(); 
           })

     rectbl.on("mouseover dragmove", function () {
           var shapesLayer = this.getLayer();
           rect.setStrokeWidth(1);
           rect.setStroke("black");  
           recttl.setFill("black"); 
           recttl.setStroke("red"); 
           rectbl.setFill("black"); 
           rectbl.setStroke("red");
           rectbr.setFill("black"); 
           rectbr.setStroke("red");
           recttr.setFill("black"); 
           recttr.setStroke("red");
           rect.setStrokeWidth(1);
           rect.setStroke("black");        
           shapesLayer.draw(); 
           })

  recttr.on("mouseover dragmove", function () {
           var shapesLayer = this.getLayer();
           rect.setStrokeWidth(1);
           rect.setStroke("black");  
           recttl.setFill("black"); 
           recttl.setStroke("red"); 
           rectbl.setFill("black"); 
           rectbl.setStroke("red");
           rectbr.setFill("black"); 
           rectbr.setStroke("red");
           recttr.setFill("black"); 
           recttr.setStroke("red");
           rect.setStrokeWidth(1);
           rect.setStroke("black");        
           shapesLayer.draw(); 
           })

 recttl.on("mouseover dragmove", function () {
           var shapesLayer = this.getLayer();
           rect.setStrokeWidth(1);
           rect.setStroke("black");  
           recttl.setFill("black"); 
           recttl.setStroke("red"); 
           rectbl.setFill("black"); 
           rectbl.setStroke("red");
           rectbr.setFill("black"); 
           rectbr.setStroke("red");
           recttr.setFill("black"); 
           recttr.setStroke("red");
           rect.setStrokeWidth(1);
           rect.setStroke("black");        
           shapesLayer.draw(); 
           })           

recttl.on("mouseout", function (){
    var shapeslayer= this.getLayer();
    recttl.setFill("transparent"); 
           recttl.setStroke("transparent"); 
           rectbl.setFill("transparent"); 
           rectbl.setStroke("transparent");
           rectbr.setFill("transparent"); 
           rectbr.setStroke("transparent");
           recttr.setFill("transparent"); 
           recttr.setStroke("transparent");
           rect.setStrokeWidth(0);
           rect.setStroke("transparent");
         shapesLayer.draw();    
})
recttr.on("mouseout", function (){
    var shapeslayer= this.getLayer();
    recttl.setFill("transparent"); 
           recttl.setStroke("transparent"); 
           rectbl.setFill("transparent"); 
           rectbl.setStroke("transparent");
           rectbr.setFill("transparent"); 
           rectbr.setStroke("transparent");
           recttr.setFill("transparent"); 
           recttr.setStroke("transparent");
           rect.setStrokeWidth(0);
           rect.setStroke("transparent");
         shapesLayer.draw();    
})

rectbl.on("mouseout", function (){
    var shapeslayer= this.getLayer();
    recttl.setFill("transparent"); 
           recttl.setStroke("transparent"); 
           rectbl.setFill("transparent"); 
           rectbl.setStroke("transparent");
           rectbr.setFill("transparent"); 
           rectbr.setStroke("transparent");
           recttr.setFill("transparent"); 
           recttr.setStroke("transparent");
           rect.setStrokeWidth(0);
           rect.setStroke("transparent");
         shapesLayer.draw();    
})

rectbr.on("mouseout", function (){
    var shapeslayer= this.getLayer();
    recttl.setFill("transparent"); 
           recttl.setStroke("transparent"); 
           rectbl.setFill("transparent"); 
           rectbl.setStroke("transparent");
           rectbr.setFill("transparent"); 
           rectbr.setStroke("transparent");
           recttr.setFill("transparent"); 
           recttr.setStroke("transparent");
           rect.setStrokeWidth(0);
           rect.setStroke("transparent");
         shapesLayer.draw();    
})



            //end mouse out of  squares


//end mouse out of  squares

            // add the shapes to the layer
            shapesLayer.add(group);



            // add the shape to the layer

            // add the layer to the stage       
}

//addtext（）函数用于将文本添加到容器中。
$（“ul#text#textsubmit”）。单击（函数（）{
addText（）；
});
函数addText（）{
var text2=$（'#texts'）.val（）；
var fontfam=$（'#fontfam'）.val（）；
var color=$（'#color'）.val（）；
var textstrope=$（'#textstrope'）.val（）；
var width=document.getElementById（“textcount”）.clientWidth；
var height=document.getElementById（“textcount”）.clientHeight；
变量长度=text2.length；
宽度=宽度；
var shapesLayer=新的dynamic.Layer（）；
//添加组
var组=新的动力学组({
德拉格布尔：是的
});
如果（字体==未定义）
{var font=30；}
如果（x==未定义）
{var x=250；}
如果（y==未定义）
{var y=55；}
var complexText=新的动能.Text({
x:x，
y:y，
文本：文本2，
字体大小：字体，
fontfam家族：fontfam，
文本填充：颜色，
textStroke:textStroke
});
stage.add（shapesLayer）；
如果（rectheight==未定义）
{var rectheight=50；}
if（rectwidth==未定义）
{var rectwidth=250；}
var-rectx=250；
var-recty=40；
var rect=new dynamic.rect（{//Rectangle）是根据名称大小来增加和减少大小的
x:rectx，
y:recty，
宽度：矩形宽度，
高度：垂直高度，
填充：“透明”，
笔画：“红色”，
冲程宽度：1
});    
var recttrx=宽度+243；
var-rectry=32；
var recttr=new dynamic.Rect（{//recttr用于创建矩形的右上角
x:recttrx，
y:试一下，
宽度：15，
身高：15，
填充：“蓝色”，
笔画：“绿色”，
冲程宽度：1
});    
var rectbrx=宽度+243；
var-rectbry=82；
var rectbr=new dynamic.Rect（{//rectbr用于创建矩形的右下角
x:rectbrx，
y:rectbry，
宽度：15，
身高：15，
填充：“黄色”，
笔画：“粉红”，
冲程宽度：1
});    
var recttlx=243；
var=32；
var recttl=new dynamic.Rect（{//recttl用于创建矩形的左上角
x:recttlx，
y：直截了当地说，
宽度：15，
身高：15，
填充：“橙色”，
笔画：“白色”，
冲程宽度：1
});  
var rectblx=243；
var=82；
var rectbl=new dynamic.Rect（{//rectbl用于创建矩形的左下角
x:rectblx，
y:是的，
宽度：15，
身高：15，
填充：“黑色”，
笔画：“红色”，
冲程宽度：1
})  
矩形on（“鼠标悬停”，函数（）{
var shapesLayer=this.getLayer（）；
document.body.style.cursor=“移动”；
直插式填充（“黑色”）；
直接定行程（“红色”）；
直管设置填充（“黑色”）；
垂直调整行程（“红色”）；
rectbr.setFill（“黑色”）；
调整行程（“红色”）；
直插塞填充（“黑色”）；
直行程设定行程（“红色”）；
直接设定行程宽度（1）；
直接设定行程（“黑色”）；
shapesLayer.draw（）；
writeMessage（messageLayer，“双击以删除或编辑文本”）；
})
on（“mouseout”，function（））{
var shapesLayer=this.getLayer（）；
document.body.style.cursor=“默认”；
直插式填充（“透明”）；
直拨设定行程（“透明”）；
直管设置填充（“透明”）；
直拍设定行程（“透明”）；
rectbr.setFill（“透明”）；
调整行程（“透明”）；
recttr.setFill（“透明”）；
直行程（“透明”）；
直接设定行程宽度（0）；
直接设定行程（“透明”）；
shapesLayer.draw（）；
writeMessage（messageLayer，“”）；
})
complexText.on（“单击”，函数（）{
警惕（）；
var layer=this.getLayer（）；
角度=getRandomInt（1,4）；
text.transitiono({
旋转：数学PI*角度/2，
持续时间：1
});
layer.draw（）；
});
complexText.on（“鼠标悬停”，函数（）{
var shapesLayer=this.getLayer（）；
document.body.style.cursor=“移动”；
直插式填充（“黑色”）；
直接定行程（“红色”）；
直管设置填充（“黑色”）；
垂直调整行程（“红色”）；
rectbr.setFill（“黑色”）；
调整行程（“红色”）；
直插塞填充（“黑色”）；
直行程设定行程（“红色”）；
直接设定行程宽度（1）；
直接设定行程（“黑色”）；
shapesLayer.draw（）；
writeMessage（messageLayer，“拖动角以增加或减少文本大小”）；
})
complexText.on（“mouseout”，function（））{
var shapesLayer=this.getLayer（）；
document.body.style.cursor=“默认”；
直插式填充（“透明”）；
直拨设定行程（“透明”）；
直管设置填充（“透明”）；
直拍设定行程（“透明”）；
rectbr.setFill（“透明”）；
调整行程（“透明”）；
recttr.setFill（“透明”）；
直行程（“透明”）；
直接设定行程宽度（0）；
直接设定行程（“透明”）；
s
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.rawgit.com/konvajs/konva/1.4.0/konva.min.js"></script>
    <meta charset="utf-8">
    <title>Konva Rotation Animation Demo</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #F0F0F0;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script>
    var width = window.innerWidth;
    var height = window.innerHeight;
    var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height
    });
    var layer = new Konva.Layer();
    /*
    * leave center point positioned
    * at the default which is the top left
    * corner of the rectangle
    */
    var blueRect = new Konva.Rect({
        x: 50,
        y: 75,
        width: 100,
        height: 50,
        fill: '#00D2FF',
        stroke: 'black',
        strokeWidth: 4
    });
    /*
    * move center point to the center
    * of the rectangle with offset
    */
    var yellowRect = new Konva.Rect({
        x: 220,
        y: 75,
        width: 100,
        height: 50,
        fill: 'yellow',
        stroke: 'black',
        strokeWidth: 4,
        offset: {
            x: 50,
            y: 25
        }
    });
    /*
    * move center point outside of the rectangle
    * with offset
    */
    var redRect = new Konva.Rect({
        x: 400,
        y: 75,
        width: 100,
        height: 50,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4,
        offset: {
            x: -100,
            y: 0
        }
    });
    layer.add(blueRect);
    layer.add(yellowRect);
    layer.add(redRect);
    stage.add(layer);
    // one revolution per 4 seconds
    var angularSpeed = 90;
    var anim = new Konva.Animation(function(frame) {
        var angleDiff = frame.timeDiff * angularSpeed / 1000;
        blueRect.rotate(angleDiff);
        yellowRect.rotate(angleDiff);
        redRect.rotate(angleDiff);
    }, layer);
    anim.start();
</script>
</body>
</html>