如何在HTML5 Canvas 中进行缩放转换-之路教程

在html5 canvas中如何进行平移转换（Translate Transform）→

Html5中的画布缩放转换

我们使用画布比例变换来定义画布元素的高度和宽度。对于它，我们使用Scale（）方法定义X和Y属性。X指定元素的宽度，y指定元素的高度。

语法

<script>

 cntx.scale(x, y);
</script>

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

在HTML5 Canvas 中进行缩放转换示例

<html>

<head>

    <style>

        body

        {

            margin: 0px;

            padding: 0px;

        }

    </style>

    <script>

        window.onload = function () {

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

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

            var rectWidth = 150;

            var rectHeight = 75;

 

 

            cntx.translate(cnvs.width/3, cnvs.height/4);

 

            //In following method we can set height and width

            cntx.scale(2, 1)

 

            cntx.fillStyle = "brown";

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

        };

 

    </script>

</head>

<body>

    <canvas id="myCanvas" width="578" height="200"></canvas>

</body>

</html>

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

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

在html5 canvas中如何进行平移转换（Translate Transform）→

Html5中的画布缩放转换

语法

在HTML5 Canvas 中进行缩放转换示例

目录