关于translate是否移动坐标轴，视频5分14说经过translate位移后坐标还是（0，0），但是W3C上不是这么定义的啊

源自：4-3 应用translate、rotate和scale

关于translate是否移动坐标轴，视频5分14说经过translate位移后坐标还是（0，0），但是W3C上不是这么定义的啊

http://www.w3school.com.cn/tags/canvas_translate.asp

在位置 (10,10) 处绘制一个矩形，将新的 (0,0) 位置设置为 (70,70)。再次绘制新的矩形（请注意现在矩形从位置 (80,80) 开始绘制）：

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);

这是W3C的定义，按这样一来，左上角坐标就应该是（0+x,0+y），再用scale缩放，对于坐标应该有影响的，只不过在这个案例的canvas里面看出不来，除非能打印出canvas的坐标。。

究竟是老师说的对还是W3C的对，还是我理解错了？？

提问者：Qzhor 2016-08-26 14:06

个回答

慕标7139032

2017-11-23 11:27:08

感觉应该还是有影响的

0

鱼字头上一把刀: 2016-10-17 22:25:29

W3C和老师说的一样呀。

把上面的稍微改一下，改成 ↓↓ 这样运行下，直观很多~

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(10,10,100,50);
ctx.translate(110,60);
ctx.fillRect(0,0,100,50);

</script>

</body>
</html>

Icekiller

2016-08-26 20:11:28

请在看一下视频，已经说了，使用translate会造成坐标原点的变换，所以要使用context.save()和context.restore()

0