理解HTML5 canvas.translate(x,y)

最新推荐文章于 2024-04-13 19:38:19 发布

原创最新推荐文章于 2024-04-13 19:38:19 发布 · 360 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

转载文章同时被 2 个专栏收录

24 篇文章

订阅专栏

html5

2 篇文章

订阅专栏

本文详细介绍了Canvas中translate(x,y)函数的使用方法及其工作原理。该函数用于将整个画布在水平方向上移动x距离，在垂直方向上移动y距离。文章通过实例解释了如何改变画布的原点，并说明了平移变换对于绘图的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

规范原文如下:
The translate(x, y) method must add the translation transformation described by the arguments to the transformation matrix. The x argument represents the translation distance in the horizontal direction and the y argument represents the translation distance in the vertical direction. The arguments are in coordinate space units.
原文见:http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-translate

translate(x,y)函数是将整个canvas水平移动x距离，垂直移动y距离。
canvas是以（0,0）为默认原点，其原点默认在屏幕左上角；通过translate（x，y）把点（x，y）作为原点。
需要注意的是：是在原点的基础上分别偏移x和y。
例子：原点假如落在（1，1），那么translate（10，10）就是在原点（1，1）基础上分别在x轴、y轴移动10，则原点变为（11,11）。