html5 怎么在线上写字，并根据线的斜率显示
日期：2014-05-17 浏览次数：20602 次
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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
