Canvas 纹理 ( Pattern ) - Canvas 基础教程

纹理即纹路，每个物体表面上不同的样子，譬如说木头的木纹状

使用过 Photoshop 的人都知道，如果要给一个图形填充一个效果，可以使用纯色填充，也可以使用渐变填充，还有一种填充，就是使用图案填充

我们把填充用到的那一小块图形称之为纹理

Canvas 中的纹理可以是一张图片，也可以是另一个 Canvas

Canvas 使用 CanvasPattern 表示一个纹理，这个对象没有任何属性，也没有任何方法，唯一创建方法是使用 createPattern()

createPattern()

ctx.createPattern() 方法用于创建一个纹理，可以使用图像或者另一个 Canvas

语法

CanvasPattern ctx.createPattern(image, repetition);

参数说明

image

作为重复图像源的 CanvasImageSource 对象。可以是下列之一

HTMLImageElement (<img>),
HTMLVideoElement (<video>),
HTMLCanvasElement (<canvas>),
CanvasRenderingContext2D,
ImageBitmap,
ImageData,
Blob

repetition

指定如何重复图像。允许的值有

值说明

repeat 水平和垂直都重复，默认

repeat-x 水平重复

repeat-y 垂直重复

no-repeat 不重复

如果为空字符串 ('') 或 null (但不是 undefined)，那么将使用 repeat

值	说明
repeat	水平和垂直都重复，默认
repeat-x	水平重复
repeat-y	垂直重复
no-repeat	不重复

纹理的使用方法

使用 createPattern() 方法创建一个创建一个纹理对象
然后把渐变对象赋值给 fillStyle 属性

范例

我们使用下面的纹理来填充一个矩形

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="400" height="200">
</canvas>
<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");

var img = new Image();
img.src = '/static/i/canvas/canvas_pattern.png';
img.onload = function() {
  var pattern = ctx.createPattern(img, 'repeat');
  ctx.fillStyle = pattern;
  ctx.fillRect(0,0,300,200);
};
</script>
<br/>
<br/>

运行结果如下