javascript - 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函数就只要修改一处就可以啦。

这篇关于javascript - translate在画扇形函数中起的作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！