translate在画扇形函数中起的作用

1 如下js代码,可以画一个扇形,效果图如下,可是我不明白translate在这里起的作用到底是什么?
2.解释如下(这里的重点在于 moveTo 和 closePath,将路径的起点设置在圆心,而最后闭合路径,正好就成为了一个扇形。)请将括弧里面的文字对应着代码讲解一下。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 开始一条新路径
ctx.beginPath();
// 位移到圆心,方便绘制
ctx.translate(100, 100);
// 移动到圆心
ctx.moveTo(0, 0);
// 绘制圆弧
ctx.arc(0, 0, 50, 0, Math.PI * 1.5);
// 闭合路径
ctx.closePath();
ctx.fill();

ctx.translate(100, 100);

是把当前画布原点的位置移到(100,100)这个位置,后面的所有步骤都是以(100,100)为参照点。

ctx.moveTo(0, 0);//实际上移动到(100,100)
ctx.arc(0, 0, 50, 0, Math.PI * 1.5);//实际上是参照(100,100)为圆心画弧

如果没有tranlate这个函数,就只能看到右下角的扇形(即1/4圆)。
总的来说,在这里tranlate函数的作用就是把当前画布原点移动到圆弧的圆心。
如果没用translate函数,那么可以这样写:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 开始一条新路径
ctx.beginPath();
// 移动到圆心
ctx.moveTo(100, 100);
// 绘制圆弧
ctx.arc(100, 100, 50, 0, Math.PI * 1.5);
// 闭合路径
ctx.closePath();
ctx.fill();

但是上面代码的可维护性和可读性就没有题主提供的代码高了。
要改变圆弧圆心的时候,上面的代码要修改moveTo和arc两处,而有了translate函数就只要修改一处就可以啦。

  • 在同一个页面同时引用多次轮播jquery插件(新手,自己做的)会发生冲突,怎么回事?
  • …mapGetters报错
  • 关于微信扫一扫的技术问题
  • 网页中如何实现图片被文字【四周】环绕效果?
  • 如何在 webpack构建时 去掉 hmr (热加载)
  • react native 使用fetch 向后端传数据提示错误
  • 如何让外部网站外链js生成指定html片段并异步更新数据
  • 怎么控制网页中iframe里的js执行问题?
  • 如何获得iframe里的document
  • css3选择器和jq选择器的比较?
  • 如何优雅的回答“什么是面向对象”?