HTML |画布 translate() 方法

HTML canvas translate() 方法用于指定对象按给定的翻译量进行翻译。

句法：

context.translate(x, y)

参数值：

• x：它存储值，即画布将向左或向右移动多少意味着 x 轴明智。
• y：它存储值，即画布将上下移动多少意味着 y 轴明智。

例 1：这里可以通过改变 x 轴和 y 轴来检查。

  

    
        HTML canvas translate() Method
    

  

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

  

输出：

示例 2：

  

    
        HTML canvas translate() Method
    

  

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

  
 

输出：

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

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