html5 canvas translate()方法理解记录
接触多了html5 canvas 慢慢开始发现后面的canvas数学相关越来越多,坐标系,坐标,sin,cos,tan,矩阵。。越来越有难度有意思了
现在接触到canvas translate(x,y) 发现其中有点古怪,还是先看w3c上是怎么解释的:
Translating(转换)
该方法用于“移动”canvas,之后画布的原点(0,0)将改变为(0+x,0+y)
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(10,10,100,50);
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);
如上例子, 第一个矩形起始坐标为(10,10) 调用了translate(70,70)后,新建了一个坐标系,原点改变,在第二个矩形开始画的起始坐标变为(10+70,10+70)
这就是translate(x,y)古怪的地方,调用后将影响后面画布元素
例如:var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
context.fillRect(150, 50 , 10, 10);
context.translate(150, 50);//坐标原点变为(150,50)
context.fillRect(150,50 , rectWidth, rectHeight);
context.translate(150, 50);//这是坐标原点变(300,100)
context.fillRect(150, 50 , rectWidth, rectHeight); //矩形的起始变为(450,100)
可想而知,canvas会记录当前原点坐标,每当调用了translate(x,y)方法后新的坐标原点会在原先的基础上加上相应的值,影响到很多方法如clearRect(x,y,width,height) fillRect(x,y,width,height)等等
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步