HTML canvas translate()用法及代码示例

HTML canvas translate()方法用于指定对象以给定的转换量进行转换。

用法:

context.translate(x, y)

参数值：

x:它存储值，即画布将向左或向右移动多少表示x轴方向。
y:它存储值，即画布将上下移动多少意味着y轴方向。

范例1：您可以在此处通过更改x轴和y轴进行检查。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML canvas translate() Method 
    </title> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green">GeeksforGeeks</h1> 
        <canvas id="GFG" width="500" height="250" 
                     style="border:2px solid gray"> 
        </canvas> 
  
        <script> 
            var geeks = document.getElementById("GFG"); 
            var contex = geeks.getContext("2d"); 
            contex.translate(250, 110); //contex.translate(x, y); 
            contex.fillStyle = "#00FF00"; 
            contex.fillRect(20, 20, 150, 100); 
        </script> 
  
    </center> 
</body> 
  
</html>

输出：

范例2：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML canvas translate() Method 
    </title> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green">GeeksforGeeks</h1> 
        <canvas id="GFG" width="500" height="250" 
                style="border:2px solid gray"> 
        </canvas> 
  
        <script> 
            var geeks = document.getElementById("GFG"); 
            var contex = geeks.getContext("2d"); 
            contex.rect(00, 00, 150, 100); 
            contex.fillStyle = "green"; 
            contex.fill(); 
            contex.stroke(); 
  
            contex.translate(250, 50); 
            contex.rect(100, 100, 150, 100); 
            contex.fillStyle = ""; 
            contex.fill(); 
            contex.stroke(); 
        </script> 
    </center> 
</body> 
  
</html>

输出：

注意：如果在translate()方法之后调用fillRect()方法，则该值将添加到x和y坐标值中。
支持的浏览器：

谷歌浏览器
Internet Explorer 9.0或以上
火狐浏览器
苹果浏览器
Opera

相关用法

注：本文由纯净天空筛选整理自jit_t大神的英文原创作品 HTML | canvas translate() Method。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。