在HTML5中如何使用Canvas进行旋转变换-之路教程

在HTML5 Canvas中进行旋转变换

使用Canvas旋转变换到元素的定义旋转。
因为它使用rotate()方法，其中我们定义了元素的角度和半径。

在HTML5中如何使用Canvas进行旋转变换

在HTML5 Canvas中进行旋转变换示例

<html>

<head>

    <style>

        body

        {

            margin: 0px;

            padding: 0px;

        }

    </style>

    <script>

        window.onload = function () {

            var cnvs = document.getElementById("cnvsh");

            var cntx = cnvs.getContext("2d");

            var rectWidth = 150;

            var rectHeight = 75;

     

            cntx.translate(cnvs.width/5, cnvs.height/2);

 

            //rotate 50 degrees clockwise

            cntx.rotate(Math.PI/2);

 

            cntx.fillStyle = "blue";

            cntx.fillRect(-rectWidth/2, -rectHeight/2, rectWidth, rectHeight);

        };

 

    </script>

</head>

<body>

    <canvas id="cnvsh" width="500" height="200"></canvas>

</body>

</html>

在HTML5 Canvas中进行旋转变换语法

<script>
	cntx.rotate(rotation);
</script>

日期：2020-04-11 23:04:07 来源：oir作者：oir

←如何在html5中使用canvas绘制二次曲线

如何在HTML5 Canvas 中进行缩放转换→

在HTML5 Canvas中进行旋转变换

在HTML5 Canvas中进行旋转变换示例

在HTML5 Canvas中进行旋转变换语法

目录