html5 怎么在线上写字，并根据线的斜率显示 _HTML/CSS

html5 如何在线上写字，并根据线的斜率显示
代码如下：

HTML code

<!DOCTYPE HTML>
<html>
<body>
    <canvas id="myCanvas" width="700" height="700" style="border: 1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
    <script type="text/javascript">
        var c = document.getElementById("myCanvas");
        var cxt = c.getContext("2d");
        cxt.moveTo(60, 60);
        cxt.lineTo(80, 140);

        //cxt.rotate(Math.PI/4);            //问题一：此处注释掉了，如果不注释会影响下面两条线，该如何解决（下同）。
        cxt.fillText("A", 70, 100);
        cxt.lineTo(110, 200);
        //cxt.rotate(Math.PI/2);  
        cxt.fillText("B", 95, 170);
        cxt.lineTo(120, 330);
        cxt.rotate(Math.PI / 13); //问题二，此处虽未注释掉，文字也已经显示，可文字却偏离了直线，该如何解决。
        cxt.fillText("C", 115, 265);
        cxt.stroke();
    </script>
</body>
</html>

效果图如下：

------解决方案--------------------

HTML code

<!DOCTYPE HTML>
<html>
<body>
<canvas id="canvas" width="600"height="400">    
</canvas>    
     
<script type="text/javascript">    
    var canvas =document.getElementById("canvas");    
    var context2D =canvas.getContext("2d"); 

    context2D.clearRect(0,0,600,400);

    draw(30,20,100,100,"AAA", context2D);
    draw(100,100,300,200,"CCC", context2D);
    draw(300,200,400,100,"BBB", context2D);


function draw(x1,y1,x2,y2,str,context2D){
    context2D.save();
    
    context2D.beginPath();
    context2D.moveTo(x1,y1);
    context2D.lineTo(x2,y2);
    context2D.stroke();
    var k = (y2-y1)/(x2-x1);
    //var b = x2 - y2/k;
    var c = Math.sqrt(Math.pow((x1-x2),2)+Math.pow((y1-y2),2));
    context2D. translate(x1,y1);
    context2D.rotate(Math.atan(k));
    if(x1>x2)
    {
        context2D.fillText(str, -c/2, 0);
    }
    else
    {
        context2D.fillText(str, c/2, 0);
    }    
    context2D.restore();
}

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