当前位置：极客笔记 > JavaScript > JavaScript 精选教程 > Javascript translate()方法

Javascript translate()方法

Javascript translate()方法

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

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

语法

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

variable_canvas.translate(x, y);

语法解释

  • 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>

输出

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

Javascript translate()方法

示例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>

输出

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

Javascript translate()方法

示例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>

输出

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

Javascript translate()方法

示例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>

输出

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

Javascript translate()方法

示例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>

输出

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

Javascript translate()方法

示例6： 以下示例展示了在画布上使用javascript translate ()函数的不同线条和参数。我们可以使用一个方法来为多条线条使用多个输入参数。我们可以在输入方法中放置0、none和数字数据。

<!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>

输出

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

Javascript translate()方法

结论

翻译方法通过不同的x和y坐标输入数据显示了特定的形状和格式。它在地图、图表和其他2D结构中有帮助。

Camera课程

Camera API2 教程

API2 教程
Camera 性能教程

Perf 教程
Camera Native Framework 教程

Native FW 教程
Camera QCOM ISP 教程

ISP 教程
Camera QCOM Sensor 教程

Sensor 教程

Python教程

Python 教程

Python 教程
NumPy 教程

NumPy 教程
Django 教程

Django 教程

Java教程

Java 教程

Java 教程

Web教程

JavaScript 教程

JavaScript 教程
jQuery 教程

jQuery 教程
CSS 教程

CSS 教程
PHP 教程

PHP 教程
Laravel 教程

Laravel 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程

数据库教程

SQL 教程

SQL 教程
SQLite 教程

SQLite 教程
MySQL 教程

MySQL 教程
PL/SQL 教程

PL/SQL 教程
MongoDB 教程

MongoDB 教程

图形图像教程

OpenCV 教程

OpenCV 教程

办公软件教程

Excel 教程

Excel 教程

Linux教程

Linux命令全集

Linux命令全集
Linux内核API

Linux内核API
LVGL 教程

LVGL 教程

计算机教程

操作系统 教程

操作系统 教程
计算机网络 教程

计算机网络 教程
C语言 教程

C语言 教程
C++ 教程

C++ 教程
Swift 教程

Swift 教程

大数据教程

Hadoop 教程

Hadoop 教程
Spark 教程

Spark 教程
Scala 教程

Scala 教程

开发工具教程

Git 教程

Git 教程
Jenkins 教程

Jenkins 教程
ChatGPT 教程

ChatGPT 教程
IntelliJ 教程

IntelliJ 教程

JavaScript 精选教程