canvas 平移&缩放【金沙官网线上】

 

交流群:225443677

 

<!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>

 

由此不难看出,canvas的绘图状态一旦设置,就会影响之后所有元素的绘制属性!
这是由于它们都是在2D渲染上下文中操作的,而不是只针对所绘制的图形。

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

<!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>

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

本文由金沙官网线上发布于Web前端,转载请注明出处:canvas 平移&amp;缩放【金沙官网线上】

您可能还会对下面的文章感兴趣: