canvas 平移&缩放

时间 2019-11-13

标签 canvas 平移缩放繁體版

原文原文链接

1.平移
canvas其实只是一个包装器，真正起着重要做用的部分是2D渲染上下文，这才是咱们真正绘制图形的地方。
然而2D渲染上下文是一种基于屏幕的标准绘制平台。它采用屏幕的笛卡尔坐标系统，以左上角（0,0）坐标为原点。
向右移动时x的坐标值增长，向下移动时y的坐标值增长。
好了了解了坐标系统以后，我们就能够尽情的移动处理图形的位置了！
平移，也就是参照2D渲染上下文的原点(0,0)，将图形从一个坐标点移动到另外一个坐标点的过程！
使用方法：translate(x,y) 两个参数分别以原点为坐标向左增长x个单位值，向下增长y个单位值。javascript

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>变形</title>
    <script type="text/javascript">
        window.onload = function () {
            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");
            context.fillRect(150, 150, 100, 100);
            context.translate(150, 150);  //设置平移  
            context.fillStyle = "rgb(255,0,0)";
            context.fillRect(150, 150, 100, 100);   //执行位移后，将原点坐标(150,150)分别加上150，即以坐标(300,300)为原点坐标绘制宽高为100单位的矩形。
            
            context.fillStyle = "rgb(0,255,255)";
            context.translate(150, 150);   //两次位移 至关于位移了300  仍是以(300,300)为坐标进行绘制
            context.fillRect(0, 0, 100, 100);
        }
    </script>
</head>
<body>
    <canvas id="myCanvas" width="1000" height="1000">
        您的浏览器暂不支持画布！
    </canvas>
</body>
</html>

由此不难看出，canvas的绘图状态一旦设置，就会影响以后全部元素的绘制属性！
这是因为它们都是在2D渲染上下文中操做的，而不是只针对所绘制的图形。html

2.缩放
使用方法：scale(x,y);
调整元素在2D上下文中的尺寸，与平移的区别在于(x,y)参数是缩放倍数，而不是像素值。
单独使用该方法，会让以后全部元素都跟着放大相应的倍数，这确定不是你所想要的！
所以咱们能够在缩放前，先调用save()方法，保存一下绘图状态，等当前元素执行了缩放以后，
咱们再调用一下restore()方法，这样就能够恢复到以前的绘图状态了，从而实现只对当前元素进行缩放的操做！java

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>变形</title>
    <script type="text/javascript">
        window.onload = function () {
            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");
            context.save();  //先保存下绘图状态
            context.translate(150, 150);  //进行位移操做
            context.scale(2, 2);  //将绘制元素放大2倍
            context.fillRect(0, 0, 100, 100);  
            context.restore();  //恢复绘图状态
            context.fillRect(0, 0, 100, 100);  //此时，绘制的矩形既没位移，又没放大！
        }
    </script>
</head>
<body>
    <canvas id="myCanvas" width="1000" height="1000">
        您的浏览器暂不支持画布！
    </canvas>
</body>
</html>