javascript - translate在画扇形函数中起的作用-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI聊天问答 Agent智能体 AI文本写作 AI绘画作图 AI设计工具 AI视频创作 AI音频制作 AI办公学习 AI编程开发 AI提示词

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

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

PHP中文网 2017-04-11 10:33:56

[JavaScript讨论组]

667

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

PHP中文网

认证高级PHP讲师

全部回复(1)

怪我咯2017-04-11 10:35:56 1楼

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