HTML |画布 scale() 方法

HTML canvas scale() 方法用于将当前绘图缩放成更小或更大的尺寸。缩放图形后，图形的所有特征都缩放。它必须在画布之前定义。

句法：

context.scale( scalewidth, scaleheight )

参数值：

• scalewidth：缩放当前绘图的宽度，（1=100%、0.5=50%、2=200%，依此类推）。
• scaleheight：缩放当前图形的高度，（1=100%，0.5=50%，2=200%，以此类推）

示例 1：本示例使用 canvas scale() 方法来增加绘图大小。

 
 
  
 
     
        HTML canvas scale() Method
     
 
  
 

GeeksforGeeks
     
 
  
     
        var x = 
            document.getElementById("GFG"); 
        var contex = 
            x.getContext("2d"); 
        contex.strokeRect(10, 10, 150, 100); 
        contex.scale(2, 2);
        contex.strokeRect(50, 50, 150, 100);
     

 
  
 

输出：

示例 2：本示例使用 canvas scale() 方法来减小绘图尺寸。

 
 
  
 
     
        HTML canvas scale() Method
     
 
  
 

GeeksforGeeks
     
 
  
     
        var x = document.getElementById("GFG"); 
        var contex = x.getContext("2d"); 
        contex.strokeRect(10, 10, 150, 100); 
        contex.scale(0.5, 0.5);
        contex.strokeRect(50, 50, 150, 100);
     

 
  
                    

输出：

支持的浏览器： HTML canvas scale() 方法支持的浏览器如下：

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