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

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

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

Qzhor

2016-08-26 14:06

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的对，还是我理解错了？？

写回答关注

3回答

慕标7139032

2017-11-23 11:27:08

感觉应该还是有影响的

0 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>

0 0

Icekiller

2016-08-26 20:11:28

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

0 0

Canvas绘图详解

Canvas系列教程第二课,详解Canvas各接口，让同学彻底掌握Canvas绘图

72881 学习 · 422 问题

查看课程

相似问题

关于c点坐标

回答 1

isPointInPath坐标参数是一个点还是一片区域

回答 1

如何计算坐标点

回答 2

arcTo()中没有x0，y0，起始点的坐标是怎么得到的？

回答 1

渲染字体时的坐标问题

回答 1

打开慕课网App查看更多内容