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

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

前端爱好者。

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

阅读量2k

点赞数

分类专栏：前端文章标签： Html5

原文链接：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

版权

前端专栏收录该内容

483 篇文章 4 订阅

订阅专栏

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

前端爱好者。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html5画布操作-旋转 | rotate()

<!DOCTYPE HTML> <html> <head> <title>旋转</title> </head> <body> <canvas id="canvas" width="40...
复制链接

扫一扫