-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>
<html><style>
.div>div{
margin: 10px
font-size: 50px
display: inline-block
}
input[type=button]{
margin: 10px
font-size: 20px
cursor: pointer
}
</style>
<body style="text-align: center">
<div class="div">
<div>字</div>
<div>体</div>
<div>旋</div>
<div>转</div>
</div>
<div>
<input type="button" value="左旋转" onclick="doLeftTransform()"/>
<input type="button" value="右旋转" onclick="doRightTransform()"/>
</div>
</body>
<script type="text/javascript">
var deg = 0
function doLeftTransform()
{
deg -= 90
if(deg == -360) deg = 0
var span = document.querySelectorAll(".div>div")
span.forEach(function(one){
one.style.transform = "rotate("+deg+"deg)"
})
}
function doRightTransform()
{
deg += 90
if(deg == 360) deg = 0
var span = document.querySelectorAll(".div>div")
span.forEach(function(one){
one.style.transform = "rotate("+deg+"deg)"
})
}
</script>
</html>
有问题追问。。。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）