canvas简单画布变换

画布变换是指用数学方法调整所绘形状的物理属性。缩放和旋转是常用的两个形状变换。

<!DOCTYPE HTML>
<html lang="cn">

<head>
    <meta charset="utf-8">
    <title>canvans</title>
    <script src="modernizr-custom.js"></script>
    <script type="text/javascript">
        //检测window是否加载完毕最终的代码
        window.addEventListener('load', eventWindowLoaded, false);

        function eventWindowLoaded() {
            canvasApp();
        }

        //检测是否支持canvas
        //使用modernizr.js
        function canvasSupport() {
            return Modernizr.canvas;
        }

        //
        function canvasApp() {
            if (!canvasSupport()) {
                return;
            } else {
                var theCanvas = document.getElementById("canvas"); //创建画布实例
                var context = theCanvas.getContext("2d"); //获得2D上下文
            }
            drawScreen();

            function drawScreen() {
                context.setTransform(1, 0, 0, 1, 0, 0);
                var angleRadians = 45 * Math.PI / 180;
                context.rotate(angleRadians);
                context.fillStyle = 'red';
                context.fillRect(100, 100, 50, 50);
            }
        }
    </script>
</head>

<body>

    <canvas id="canvas" width="500" height="400">
                Your browser does not support the canvas element.
    </canvas>

</body>

</html>

将画面旋转45度，需要以下的几个操作：

context.setTransform(1, 0, 0, 1, 0, 0);

var angleRadians = 45 * Math.PI / 180;

context.rotate(angleRadians);

案例2：旋转以及Canvas状态

function drawScreen() {
                //绘制黑色正方形
                context.fillStyle = 'balck';
                context.fillRect(20, 20, 25, 25);

                //绘制红色正方形
                context.setTransform(1, 0, 0, 1, 0, 0);
                var angleInRadians = 45 * Math.PI / 180;
                context.rotate(angleInRadians);
                context.fillStyle = "red";
                context.fillRect(100, 100, 50, 50);
            }

案例3：围绕中心点旋转

function drawScreen() {
                //绘制黑色正方形
                context.fillStyle = 'balck';
                context.fillRect(20, 20, 25, 25);

                //绘制红色正方形
                context.setTransform(1, 0, 0, 1, 0, 0);
                var angleInRadians = 45 * Math.PI / 270;
                var x = 100;
                var y = 100;
                var width = 50;
                var height = 50;
                context.translate(x + .5 * width, y + .5 * height);
                context.rotate(angleInRadians);
                context.fillStyle = 'red';
                context.fillRect(-.5 * width, -.5 * height, width, height);
            }

缩放变换

context.scale()函数有两个参数：第一个是x轴的缩放属性，第二个是y轴的缩放属性。一个对象的正常缩放大小数值是1，如果要放大一倍，将参数设置为2

                context.setTransform(1, 0, 0, 1, 0, 0);
                context.scale(2, 2);
                context.fillStyle='red';
                context.fillRect(100,100,50,50);

案例4：从中心点缩放

            function drawScreen() {
                //绘制一个红色正方形
                context.setTransform(1, 0, 0, 1, 0, 0);
                var x = 100;
                var y = 100;
                var width = 50;
                var height = 50;
                context.translate(x + .5 * width, y + .5 * height);
                // context.scale(2, 2);
                context.fillStyle = 'red';
                context.fillRect(-.5 * width, -.5 * height, width, height);

            }

案例5：缩放和旋转组合

function drawScreen() {
                //绘制一个红色正方形
                context.setTransform(1, 0, 0, 1, 0, 0);
                var x = 100;
                var y = 100;
                var width = 50;
                var height = 50;
                context.translate(x + .5 * width, y + .5 * height);
                context.scale(2, 2);
                var angleInRadians = 45 * Math.PI / 180;
                context.rotate(angleInRadians);
                context.fillStyle = 'red';
                context.fillRect(-.5 * width, -.5 * height, width, height);
            }

canvas简单画布变换

猜你喜欢