html5 如何在线上写字，并根据线的斜率显示
代码如下：
<!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><!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>