scale.html

<!DOCTYPE html><!DOCTYPE html><html lang="en"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0">    <link rel="stylesheet" href="main.css"></head><body>    <canvas id="canvas"></canvas>    <script>        var ca = document.getElementsByTagName('canvas')[0],            ctx = ca.getContext('2d');        ca.width = document.body.clientWidth;        ca.height = document.body.clientHeight;        ctx.scale(2, 2); //放大两倍        ctx.fillStyle = 'rgb(0,0,0)';        ctx.fillRect(15, 15, 10, 10); //放大两倍的方        ctx.save(); //保存状态        ctx.translate(15, 15); //画布原点平移        ctx.scale(2, 2); //再放大两倍        ctx.fillStyle = 'rgb(255,0,0)';        ctx.fillRect(15, 15, 10, 10); //相比开始平移及放大4倍的方        ctx.restore(); //恢复最近一次存储的画布状态        ctx.fillRect(150, 15, 10, 10); //save状态放大两倍的方        var image = new Image();        image.src = 'a.jpg';        /**         * scale(-1,-1)翻转         */        image.onload = function() {            //left up            ctx.setTransform(1, 0, 0, 1, 0, 0);            ctx.translate(200, 100);            ctx.drawImage(image, 0, 0, 293, 220, 0, 0, 300, 200);            //left down            ctx.setTransform(1, 0, 0, 1, 0, 0);            ctx.translate(200, 500);            ctx.scale(1, -1);            ctx.drawImage(image, 0, 0, 293, 220, 0, 0, 300, 200);            // right up            ctx.setTransform(1, 0, 0, 1, 0, 0);            ctx.translate(800, 100);            ctx.scale(-1, 1);            ctx.drawImage(image, 0, 0, 293, 220, 0, 0, 300, 200);            //right down            ctx.setTransform(1, 0, 0, 1, 0, 0);            ctx.translate(800, 500);            ctx.scale(-1, -1);            ctx.drawImage(image, 0, 0, 293, 220, 0, 0, 300, 200);        }    </script></body></html>