Javascript translate() 方法

2025 年 3 月 18 日 | 6 分钟阅读

使用二维绘图上下文的 translate() 方法。translate(x,y) 方法用于将画布及其原点移动 x 和 y 个单位。

另一方面，translate() 方法重新映射画布上的绘图位置 (0,0)。当调用 fillRect() 等方法后紧跟 translate() 时，值会包含在 x 和 y 坐标参数中。

语法

translate() 方法的语法如下所示：

语法说明

x 代表我们希望将画布原点水平移动的距离。如果 x 为正，则原点向左移动；如果 x 为负，则向右移动。
Y 代表我们希望将画布原点垂直移动的距离。当 y 为正或负时，原点会相应移动。
画布的原点 (0,0) 默认位于画布的左上角。
通过添加平移变换，移动了整个坐标系统，其新原点位于 (x,y)。

JavaScript translate() 的使用。

translate() 函数非常有用。考虑绘制两个对象，其中一个对象是另一个对象的平移。

我们可以绘制第一个对象并对其进行平移。之后，我们可以在画布上绘制第二个对象。

如果未使用平移变换，我们必须确定第二个对象的新坐标。

示例

这些示例使用 translate() 方法展示了以所需位置绘制的格式。

示例 1： 以下示例展示了画布上正方形的基本 translate() 方法。画布显示浅灰色，橙色正方形则进行了平移。单个正方形的值使用 JavaScript 方法进行了平移。

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title> JavaScript translate() method </title>
</head>
<body>
<h3> JavaScript translate() method </h3>
<canvas id = "canvas_data" height = "200" width = "300" style = "background-color:lightgrey;">
</canvas>
<script>
function draw_line() {
const canvas_var = document.querySelector('#canvas_data');
if (!canvas_var.getContext) {
return;
}
const ct_var = canvas_var.getContext('2d');
// set square's color
  ct_var.fillStyle = 'yellow';
  // set rectangle's height, width, and other dimensions
    ct_var.fillRect(100, 80, 50, 50);
    // translate
    ct_var.translate(120, 110);
    // draw the second square
    ct_var.fillStyle = 'orange';
     // set square height, width, and other dimensions
    ct_var.fillRect(0, 0, 50, 50);
ct_var.stroke();
}
draw_line();
</script>
</body>
</html>

输出

图像显示了具有所需样式和位置的两个正方形。

示例 2： 以下示例展示了画布上多个正方形的多次 translate() 方法。在这里，我们为不同的正方形使用了多个方法，以用户要求的形式显示。

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title> JavaScript translate() method </title>
</head>
<body>
<h3> Multiple JavaScript translate() method </h3>
<canvas id = "canvas_data" height = "200" width = "300" style = "background-color:lightgrey;">
</canvas>
<script>
function draw_line() {
const canvas_var = document.querySelector('#canvas_data');
if (!canvas_var.getContext) {
return;
}
const ct_var = canvas_var.getContext('2d');
//translate yellow square
ct_var.translate(60, 5);
// set square's color
  ct_var.fillStyle = 'yellow'; 
  // set rectangle's height, width, and other dimensions
    ct_var.fillRect(100, 80, 50, 50);
    //translate the orange cube
   ct_var.translate(20, 30);
    // draw the second square
    ct_var.fillStyle = 'orange';
     // set square height, width, and other dimensions
    ct_var.fillRect(0, 50, 50, 50);
     //translate the black cube
     ct_var.translate(50, 20);
// draw the second square
    ct_var.fillStyle = 'black';
     // set square height, width and other dimension
    ct_var.fillRect(0, 1, 50, 50);
}
draw_line();
</script>
</body>
</html>

输出

图像显示了具有所需样式和位置的多个正方形。

示例 3： 以下示例展示了带有负输入值的多个正方形的多次 translate() 方法。在这里，我们为不同的正方形使用了多个 translate() 方法，使用正、负和最小值以用户要求的形式显示。

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title> JavaScript translate() method </title>
</head>
<body>
<h3> JavaScript translate() method with negative values </h3>
<canvas id = "canvas_data" height = "200" width = "300" style = "background-color:lightgrey;">
</canvas>
<script>
function draw_line() {
const canvas_var = document.querySelector('#canvas_data');
if (!canvas_var.getContext) {
return;
}
const ct_var = canvas_var.getContext('2d');
// set square's color
  ct_var.fillStyle = 'yellow'; 
  // set rectangle's height, width, and other dimensions
    ct_var.fillRect(100, 80, 50, 50);
    //translate the square
ct_var.translate(-60, -15);
    ct_var.fillStyle = 'orange';
     // set square height, width, and other dimensions
    ct_var.fillRect(200, 150, 55, 55);
// draw the second square
    ct_var.fillStyle = 'black';
     // set square height, width, and other dimensions
    ct_var.fillRect(200, 61, 50, 50);  
}
draw_line();
</script>
</body>
</html>

输出

图像显示了具有所需样式和位置的多个正方形。

示例 4： 以下示例展示了时钟形状的多次 translate() 方法。在这里，我们为时钟形状使用了多个方法，使用值来显示形状。

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<title> JavaScript translate() method </title>
</head>
<body>
<h3> JavaScript translate() method with positive values
</h3>
<h4> Display Clock Position using Canvas
</h4>
<canvas id = "canvas_data" height = "200" width = "300" style = "background-color:lightgrey;">
</canvas>
<script>
function draw_line() {
const canvas_var =document.querySelector('#canvas_data');
if (!canvas_var.getContext) {
return;
}
if (canvas_var.getContext) {
    const ct_var = canvas_var.getContext('2d');
    ct_var.beginPath();
    const centerX_value = canvas_var.width / 3,
        centerY_value = canvas_var.height / 2.5;
    // draw the circle
    ct_var.arc(centerX_value, centerY_value, 74, 0, 3 * Math.PI, false);
    // translate to center
    ct_var.translate(centerX_value, centerY_value);
 //ct_var.translate(60, 1);
    // draw the hour hand
    ct_var.moveTo(0, 0);
   ct_var.lineTo(-30, -20);
    // draw the minute hand
   ct_var.moveTo(0, 0);
    ct_var.lineTo(0, -55);
  ct_var.stroke();
}
}
draw_line();
</script>
</body>
</html>

输出

图像显示了具有所需样式和位置的多个正方形。

示例 5： 以下示例展示了时钟形状的带有正负值的多次 translate() 方法。在这里，我们使用单个方法为不同的线条位置使用值来显示形状。垂直线显示为对角线。

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title> JavaScript translate() method </title>
</head>
<body>
<h3> JavaScript translate() method with positive and negative values </h3>
<h4>
Display line with position using Canvas
</h4>
<canvas id = "canvas_data" height = "150" width = "200" style = "background-color:#F8F8FF;">
</canvas>
<script>
function draw_line() {
const canvas_var = document.querySelector('#canvas_data');
if (!canvas_var.getContext) {
return;
}
if (canvas_var.getContext) {
const ct_var = canvas_var.getContext('2d');
// set line stroke, line color, and line width
ct_var.strokeStyle = 'orange';
ct_var.lineWidth = 5;
// draw a black line horizontally
ct_var.beginPath();
//set horizontal line and its movement
ct_var.moveTo(100, 10);
//use translate method on vertical line
ct_var.translate(-60, 15);
//Set the line size on the canvas
ct_var.lineTo(100, 100);
ct_var.stroke();
}
}
draw_line();
</script>
</body>
</html> 

输出

图像显示了具有所需样式和位置的多个正方形。

示例 6： 以下示例显示了画布上的各种线条，以及 JavaScript translate() 函数的参数。我们可以使用单个方法为多条线使用多个输入参数。我们可以在输入方法中放置 0、null 和数值数据。

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title> JavaScript translate() method </title>
</head>
<body>
<h3> JavaScript translate() method with positive and negative values </h3>
<h4>

Display multiple lines with position using Canvas
</h4>
<canvas id = "canvas_data" height = "150" width = "200" style = "background-color: black;">
</canvas>
<script>
function drawLine_function(ctx_var, x1, y1, x2,y2, stroke, width, trans_x, trans_y) {
        //Start a new path on the line
        ctx_var.beginPath();
        // Use the cursor from the start point of the line
        ctx_var.moveTo(x1, y1);
	//use translate method on lines
ctx_var.translate(trans_x, trans_y);
        //Draw a line from the start cursor position to the given coordination
        ctx_var.lineTo(x2, y2);
        // set color of the line
        ctx_var.strokeStyle = stroke;
        // set line Widht 
        ctx_var.lineWidth = width;
        // add a stroke() method of the line to the end function 
        ctx_var.stroke();
      }
      let canvas_var = document.getElementById('canvas_data'),
          ctx_var = canvas_var.getContext('2d');
      drawLine_function(ctx_var, 10, 100, 350, 300, 'Aqua', 4, 20, -50);
      drawLine_function(ctx_var, 10, 100, 600, 10, 'pink', 5, -5, -10);
       drawLine_function(ctx_var, 10, 100, 100, 100, 'yellow', 6, 5, 30);
       drawLine_function(ctx_var, 10, 100, 50, 200, 'orange', 8, 22, -20);
</script>
</body>
</html> 

输出

图像显示了画布上具有不同宽度和坐标的多个线条。

结论

translate 方法通过使用不同的 x 和 y 坐标输入数据来显示特定的形状和格式。它有助于地图、图表和其他二维结构。

下一主题Javascript filereader

Javascript translate() 方法

语法

JavaScript translate() 的使用。

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

Javascript translate() 方法

语法

JavaScript translate() 的使用。

示例

结论

相关帖子

如何计算 JavaScript 中的数字阶乘

如何在 JavaScript 中移除类

JavaScript 中的 Promise 是什么？

Npm 更新库和 Npm 列表

文本到粒子溶解效果 JavaScript 和 CSS

如何成为一名前端开发人员

JavaScript string repeat() 方法

JavaScript 特殊字符

JavaScript Select Option

如何在 JavaScript 中切换密码可见性

订阅 Tpoint Tech

联系信息

关注我们