-moz-transform: rotate(-90deg)
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3)
display:block
(rotatoin:0,1,2,3对应旋转0,90,180,270)
1、打开Hbuilder编辑器，新建一个html空白文档，输入基本的结构，这里设置一个外围的div盒子，给外围的div高度宽度和背景颜色，文字包裹到span标签里，文字也设置一下颜色，按下Crtl+S保存一下：
2、此时可以在软件右侧的窗口可以看到效果：
3、把外围盒子的position属性设置为relative，span标签里的position属性设置为absolute，设置top、left、right、bottom的数值，此时在右侧的窗口就会发现文字的位置已经改变了：
首先：save是保存当前状态，restore是返回上一次保存的状态。你画出"文字1"，后旋转，后返回（相当于没有旋转），最后才画"文字2"，所以两次文字都不旋转。其次：rotate()的参数不是角度制，而是弧度制（Maht.PI相当于180度）。所以要旋转30角度必须这样写c.rotate(Math.PI/6)再次：旋转之后的方向都发生了改变。就是说如果你先在x=200,y=200的地方画了东西，然后旋转30度，然后在x=200,y=200的地方画了另一个东西，这两个东西将不在同一个地方。（可以想象画画得人绕着坐标原点旋转了30度，而画布位置没变）最后：附上能看见效果的代码。<!DOCTYPE HTML><html><head><title>canvas</title><meta charset="utf-8" /></head><body><canvas id="canvas" width="600"height="400" style="border:1px solid black"><p>Your browserdoes not support the canvas element!</p> </canvas> <script type="text/javascript">var canvas =document.getElementById("canvas") var c =canvas.getContext("2d")c.fillStyle = '#000000'c.font = 'bold 16px verdana'c.fillText("文字1",200,30)c.save()c.rotate(Math.PI/6)c.fillText("文字2",200,30)c.restore()</script></body></html>欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）