canvas.translate(x,y)一点新的认识

本文深入解析了Canvas中translate函数的工作原理,并纠正了常见的误解。解释了translate如何改变原点的位置,以及如何通过restore函数恢复到之前的坐标状态。

之前对于canvas.translate(x,y)的理解有的错误,之前一直以原点(0,0)为基准点,作用就是移动原点,默认的原点(0,0)是在屏幕左上角的,你可以通过translate(x,y)把点(x,y)作为原点,就一直以为这个(x,y)就是新的坐标原点。但看一下API就会知道,这种理解是不对的,不过API上面讲解的也不太清楚:

[java]  view plain copy
  1. public void translate (float dx, float dy)  
  2.   
  3. Since: API Level 1  
  4. Preconcat the current matrix with the specified translation  
  5. Parameters  
  6. dx  The distance to translate in X  
  7. dy  The distance to translate in Y  

其实是原来的原点分别在x轴和y轴偏移多远的距离,然后以偏移后的位置作为坐标原点。也就是说原来在(100,100),然后translate(1,1)新的坐标原点在(101,101)而不是(1,1)

问:translate();restore();translate();经过这三个函数,原点是怎么变化的?

答:如果在描绘之前调用save了,restore就会返回原点,否则会继续那个translate后的点。

转载自:http://blog.youkuaiyun.com/gaomatrix/article/details/6625299

### Canvas 中 `translate()` 方法详解 `translate(x, y)` 方法用于重新映射画布上的 `(0, 0)` 位置,即实现画布的平移操作。这意味着任何后续绘制的操作都将基于新的原点坐标进行定位[^3]。 #### 基本语法 ```javascript context.translate(x, y); ``` - **参数说明** - `x`: X 轴方向上的偏移量。 - `y`: Y 轴方向上的偏移量。 当调用了 `translate()` 后,所有的绘图指令都会相对于新设定的原点执行。这使得开发者可以更方便地控制图形的位置而无需频繁调整具体坐标的数值。 #### 实际应用案例 为了更好地理解如何使用该函数,在下面的例子中将展示如何通过 `translate()` 来改变矩形的显示位置: ```html <canvas id="myCanvas" width="200" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); // 设置初始颜色填充样式 ctx.fillStyle = 'blue'; // 绘制未经过平移处理的标准蓝色方块 ctx.fillRect(50, 50, 75, 50); // 应用 translate 函数使之后的所有绘画都向右移动80像素并向下移动90像素 ctx.translate(80, 90); // 改变颜色以便区分两个不同的对象 ctx.fillStyle = 'red'; // 再次绘制相同大小但是已经过位移后的红色方块 ctx.fillRect(50, 50, 75, 50); </script> ``` 在这个例子中可以看到,即使第二次调用 `fillRect()` 的时候使用的还是相同的坐标值 `(50, 50)` 和尺寸 `(75, 50)` ,但由于之前设置了 `translate(80, 90)` ,因此最终呈现出来的第二个方形会出现在距离第一个正方形较远的地方。 值得注意的是,如果希望恢复之前的转换状态,则可以通过保存当前上下文(`save()`)以及恢复它(`restore()`)来完成这样的需求[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值