canvas translate()方法实例及效果

最新推荐文章于 2024-08-11 18:03:48 发布

大叶豌豆

最新推荐文章于 2024-08-11 18:03:48 发布

阅读量1.4w

点赞数 6

分类专栏： HTML5 文章标签： canvas translate 详解

本文链接：https://blog.csdn.net/dayewandou/article/details/78235075

版权

HTML5 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

canvas中很多的变换效果常用的就是translate()、rotate()和scale()
今天就来说一下translate()
translate(x,y)方法重新映射画布上的 (0,0) 位置。也就是画布的平移
参数：x：X轴的偏移量
y：Y轴的偏移量
因为位置的平移是针对画布的，所以一般，我们绘制的图形都会受到平移的影响

特别注意：clearRect()也会受到平移的影响，所有在使用平移方法之后，如果要用clearRect一定要计算清楚

说了这么多，还是看写个例子吧

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>平移变换</title>
    <style>
        canvas{
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas width="800" height="600"></canvas>
    <script>
        var canvas=document.querySelector('canvas');
        var ctx=canvas.getContext('2d');
        ctx.translate(50,50);
        ctx.strokeRect(0,0,300,200);
        ctx.strokeStyle='red';
        ctx.strokeRect(0,0,400,300);
    </script>
</body>
</html>

实例显示效果：
这里写图片描述

我们看到一个什么情况呢？就是两个矩形坐标设置的初始坐标轴都是（0,0）但是我们看到，内部的这两个矩形都没有从初始值开始，就是因为我们使用了translate(50,50);重新应设置canvas画布的位置，所有就看到两个矩形的初始点就向右向下平移了50px；
上面写道，因为位置的平移是针对画布的，所以一般，我们绘制的图形都会受到平移的影响

那具体代码怎么写呢？看看下面的代码吧

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>平移变换</title>
    <style>
        canvas{
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas width="800" height="600"></canvas>
    <script>
        var canvas=document.querySelector('canvas');
        var ctx=canvas.getContext('2d');
        ctx.save();//保存了初始的状态
        ctx.translate(50,50);
        ctx.strokeRect(0,0,300,200);
        ctx.restore();//恢复初始的状态
        ctx.strokeStyle='red';
        ctx.strokeRect(0,0,400,300);
    </script>
</body>
</html>

实例显示效果：
这里写图片描述

我们看到这个红色的矩形恢复了原始的状态，起始点从(0,0)开始画了一个宽为400，长为300的矩形，就是因为我们用了save()和restore()方法

那么如果我们不想要图片受到translate方法的影响，那么我们就可以用到canvas save()和restore()保存和恢复来实现

下面我们在来看一个例子，我们上面说因为translate()平移是针对的画布，所以在使用clearRect也会受到平移的影响，而且一定要计算清楚，那么如何计算，具体是多少才行呢？

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>平移变换</title>
    <style>
        canvas{
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas width="800" height="600"></canvas>
    <script>
        var canvas=document.querySelector('canvas');
        var ctx=canvas.getContext('2d');
        ctx.translate(50,50);
        ctx.strokeRect(0,0,300,200);
        ctx.clearRect(0,0,canvas.width,canvas.height); //一般我们清除的初始坐标都为（0,0）
    </script>
</body>
</html>

实例显示效果：
这里写图片描述

咦？？啥情况？？还剩下两条虚线，这就涉及到另外一个概念了
canvas 中的
线宽默认为1px时，是以默认的法线为基准向上向下延伸1px的虚影
线宽设置为2px时，是以默认的法线为基准向上向下延伸1px的实线
线宽默认为3px时，是以默认的法线为基准向上向下延伸1px的实线，在向上向下延伸1px的虚影
线宽默认为4px时，是以默认的法线为基准向上向下延伸2px的实线

这里写图片描述
这就画一张图吧，就是线宽为默认1px时，默认以红线按照小箭头的方向，向内向外延伸了1px的虚影，一般我们清除的时候都是canvas（0,0，canvas.width,canvas.height）从（0,0）点开始以canvas的宽和高清除，但是我们看到，刚才法线只清除了内部的1px，剩下了外部的1px虚影未清除，所以导致上图出现的bug，怎么解决这个问题呢？

直接让canvas（-1，-1，canvas.width,canvas.height）,起始点以（-1，-1）开始画一个矩形进行清除就可以了
如下代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>平移变换</title>
    <style>
        canvas{
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas width="800" height="600"></canvas>
    <script>
        var canvas=document.querySelector('canvas');
        var ctx=canvas.getContext('2d');
        ctx.translate(50,50);
        ctx.strokeRect(0,0,300,200);
        ctx.clearRect(-51,-51,canvas.width,canvas.height);  
    </script>
</body>
</html>