html 怎么旋转字体

html-css016

html 怎么旋转字体,第1张

-webkit-transform: rotate(-90deg)

-moz-transform: rotate(-90deg)

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3)

display:block

(rotatoin:0,1,2,3对应旋转0,90,180,270)

首先: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>