HTML |画布 createPattern() 方法

createPattern() 方法用于在指定方向重复指定元素。它可以是图像、视频或任何其他画布元素。

句法：

context.createPattern(image, "repeat | repeat-x | repeat-y | no-repeat");

参数：

• 图像：它指定要使用的图案的图像、画布或视频元素。
• 重复：它在水平和垂直方向重复模式。这是默认设置。
• repeat-x：仅水平重复模式。
• 重复-y：它仅垂直重复模式。
• no-repeat：不重复模式。

例子：

  

    
        HTML | canvas createPattern() Method
    


     GeeksforGeeks 
     HTML canvas createPattern() Method 
    Image to be used:
  
    
  
    Canvas:
    
    
    
  
    
    Repeat
  
    
    
        function create(value) {
            var gfg = document.getElementById("myCanvas");
            var context = gfg.getContext("2d");
            context.clearRect(0, 0, gfg.width, gfg.height);
            var img = document.getElementById("geeks")
            var pattern = context.createPattern(img, value);
            context.rect(0, 0, 150, 100);
            context.fillStyle = pattern;
            context.fill();
        }
    

  

输出：

• 点击按钮前：
  
• 单击重复按钮后：
  

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

• 铬合金
• 火狐浏览器
• 浏览器 9.0
• 歌剧
• 苹果浏览器