                        课程
                    
                        /前端开发
                        
                            /Html5
                        
                        /Canvas绘图详解

关于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

源自：Canvas绘图详解 4-3

关注问题我要回答

1263

操作

收起

3 回答

慕标7139032
2017-11-23

感觉应该还是有影响的

0 回复有任何疑惑可以回复我~

收起回答

鱼字头上一把刀
2016-10-17

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>