Html5画布操作-旋转 | rotate()

最新推荐文章于 2021-06-24 07:28:27 发布

转载最新推荐文章于 2021-06-24 07:28:27 发布 · 2.1k 阅读

CC 4.0 BY-SA版权

原文链接：https://www.mk2048.com/blog/blog.php?id=ji0bahaib&title=Html5%E7%94%BB%E5%B8%83%E6%93%8D%E4%BD%9C-%E6%97%8B%E8%BD%AC+%7C+rotate%28%29

文章标签：

#Html5

前端专栏收录该内容

483 篇文章

订阅专栏

本文通过一个具体的HTML5 Canvas实例，展示了如何使用JavaScript控制Canvas进行旋转绘制，包括设置初始矩形绘制、旋转角度计算及清除画布等功能，适合初学者理解Canvas的基本操作。

                        
                    

        <!DOCTYPE HTML>
<html>
<head>
    <title>旋转</title>
</head>
<body>
    <canvas id="canvas" width="400" height="400" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">不断地点我看 Demo</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <script type="text/javascript">

        var ctx = document.getElementById('canvas').getContext('2d');

        var canvasRadian = 0;
        var stepRadian = 15 * Math.PI / 180;

        function drawIt() {
            if (canvasRadian == 0)
                ctx.strokeRect(360, 0, 20, 60);

            canvasRadian  = stepRadian;

            /*
             * context.rotate(radian) - 将当前的用户坐标系旋转指定的弧度，顺时针为正值，逆时针为负值
             *   radian - 弧度值
             */
            ctx.strokeStyle = "blue";
            ctx.rotate(stepRadian);
            ctx.strokeRect(360, 0, 20, 60);
        }

        function clearIt() {
            ctx.rotate(-canvasRadian);
            canvasRadian = 0;
            ctx.strokeStyle = "black";

            ctx.clearRect(0, 0, 400, 400);
        }

    </script>
</body>
</html>
     
    