HTML5 Canvas进行自定义变换语法

<script>

    cntx.transform(val1,val2,val3,val4,val5,val6);

</script>

HTML5 Canvas进行自定义变换示例

<html>

<head>

    <style>

        body

        {

            margin: 0px;

            padding: 0px;

        }

    </style>

    <script>

        window.onload = function () {

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

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

            var rectWidth = 200;

            var rectHeight = 100;

 

            var tx = cnv.width/4;

            var ty = cnv.height/3;

 

            //Fill hear custon tranform

            cntx.transform(.5, 0, 0, 1, tx, ty);

 

            cntx.fillStyle = "blue";

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

        };

 

    </script>

</head>

<body>

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

</body>

</html>
在HTML5中如何使用Canvas自定义变换

在html5中Canvas自定义转换

自定义转换用于将元素设置为矩阵形式。
因为它需要六个以3 * 3形式的值。
对于自定义变换,我们使用变换()方法。

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