在html5 canvas中如何进行平移转换（Translate Transform）-之路教程

HTML5 Canvas Translate Transform

Translate Transform是用于移动整个画布元素的画布工具。
Translate Transform使我们能够在细节位置移动整个Canvas元素。
因为它使用Transplate()方法，可以通过以下方式定义CANVAS高度和宽度位置，我们可以通过该宽度位置进行细节位置。

语法

<script>

    cntx.translate(x, y);

</script>

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

html5 canvas中如何进行平移转换示例

<html>

<head>

    <style>

      body {

      

      }

    

      }

    </style>

    <script>

        window.onload = function () {

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

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

            var rectWidth = 150;

            var rectHeight = 75;

 

            //In following method we can set the position of Canvas

            cntx.translate(cnv.width/4, cnv.height/4);

 

            cntx.fillStyle = "green";

            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中使用class属性→

HTML5 Canvas Translate Transform

语法

html5 canvas中如何进行平移转换示例

目录