html 怎么旋转字体

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>

<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>

有问题追问。。。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7188607.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-02
下一篇 2023-04-02

发表评论

登录后才能评论

评论列表(0条)

保存