html canvas createPattern()方法在画布上创建图案

html canvas createPattern()方法

HTML canvas createPattern()方法是用来在画布上创建图案的，它可以用来创建可重复的纹理和图案，并且可以用来填充画布。

使用方法

使用该方法需要两个参数，一个是图片，一个是重复模式。图片可以是一个图片的路径，也可以是一个可用的HTMLImageElement实例，重复模式有以下几种：

• repeat：表示横向和纵向都重复
• repeat-x：表示横向重复，纵向不重复
• repeat-y：表示纵向重复，横向不重复
• no-repeat：表示不重复

该方法返回一个CanvasPattern对象，该对象可以用来填充画布，例如：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = 'image.jpg';
img.onload = function(){
  var pattern = ctx.createPattern(img, 'repeat');
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}

上述代码中，我们创建了一个图片的路径，使用createPattern()方法将图片转换成一个可重复的图案，使用fillStyle属性设置画布的填充图案，使用fillRect()方法来填充画布。

html canvas createPattern()方法可以用来在画布上创建图案，它可以用来创建可重复的纹理和图案，并且可以用来填充画布。该方法需要两个参数，一个是图片，一个是重复模式，它返回一个CanvasPattern对象，可以用来填充画布。