canvas translate()方法实例及效果 |
您所在的位置：网站首页 › 云朵歌曲在线播放视频免费 › canvas translate()方法实例及效果 |
canvas translate()方法实例及效果
|
canvas中很多的变换效果常用的就是translate()、rotate()和scale() 今天就来说一下translate() translate(x,y)方法重新映射画布上的 (0,0) 位置。也就是画布的平移 参数：x：X轴的偏移量 y：Y轴的偏移量 因为位置的平移是针对画布的，所以一般，我们绘制的图形都会受到平移的影响 特别注意：clearRect()也会受到平移的影响，所有在使用平移方法之后，如果要用clearRect一定要计算清楚 说了这么多，还是看写个例子吧 平移变换 canvas{ border: 1px solid #000; } 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);实例显示效果： 我们看到一个什么情况呢？就是两个矩形坐标设置的初始坐标轴都是（0,0）但是我们看到，内部的这两个矩形都没有从初始值开始，就是因为我们使用了translate(50,50);重新应设置canvas画布的位置，所有就看到两个矩形的初始点就向右向下平移了50px； 上面写道，因为位置的平移是针对画布的，所以一般，我们绘制的图形都会受到平移的影响 那具体代码怎么写呢？看看下面的代码吧 平移变换 canvas{ border: 1px solid #000; } 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);实例显示效果： 我们看到这个红色的矩形恢复了原始的状态，起始点从(0,0)开始画了一个宽为400，长为300的矩形，就是因为我们用了save()和restore()方法 那么如果我们不想要图片受到translate方法的影响，那么我们就可以用到canvas save()和restore()保存和恢复来实现 下面我们在来看一个例子，我们上面说因为translate()平移是针对的画布，所以在使用clearRect也会受到平移的影响，而且一定要计算清楚，那么如何计算，具体是多少才行呢？ 平移变换 canvas{ border: 1px solid #000; } 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）实例显示效果： 咦？？啥情况？？还剩下两条虚线，这就涉及到另外一个概念了 canvas 中的 线宽默认为1px时，是以默认的法线为基准向上向下延伸1px的虚影 线宽设置为2px时，是以默认的法线为基准向上向下延伸1px的实线 线宽默认为3px时，是以默认的法线为基准向上向下延伸1px的实线，在向上向下延伸1px的虚影 线宽默认为4px时，是以默认的法线为基准向上向下延伸2px的实线
直接让canvas（-1，-1，canvas.width,canvas.height）,起始点以（-1，-1）开始画一个矩形进行清除就可以了 如下代码： 平移变换 canvas{ border: 1px solid #000; } 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);显示效果如下： ok，因为清除了画布中的所有内容所以画布中什么也没有显示，铛铛这就是我们想要的效果啦 so？为啥横纵坐标成了-51，-51了？因为横纵坐标还用translate平移了50px，所以清除的时候除了既要考虑到线宽还要考虑到横纵坐标的偏移量 |
这就画一张图吧，就是线宽为默认1px时，默认以红线按照小箭头的方向，向内向外延伸了1px的虚影，一般我们清除的时候都是canvas（0,0，canvas.width,canvas.height）从（0,0）点开始以canvas的宽和高清除，但是我们看到，刚才法线只清除了内部的1px，剩下了外部的1px虚影未清除，所以导致上图出现的bug，怎么解决这个问题呢？
【本文地址】