CanvasRenderingContext2D.createPattern()

了解CanvasRenderingContext2D.createPattern()

简介

CanvasRenderingContext2D.createPattern()用来创建图案对象。可以指定平铺方式，用来作为图案的类型也多种多样。

语法

context.createPattern(image, repetition);

返回值是CanvasPattern对象。

参数

各个参数含义和作用如下：

image

Object

用来平铺的CanvasImageSource图像。可以是下面的类型：

• HTMLImageElement，也就是<img>元素。
• HTMLVideoElement，也就是<video>元素，例如捕获摄像头视频产生的图像信息。
• HTMLCanvasElement
• CanvasRenderingContext2D
• ImageBitmap
• ImageData
• Blob

repetition

String

图案的平铺方式，可以是下面的值：

• 'repeat'，水平和垂直平铺。当repetition属性值为空字符串''或者null，也会按照'repeat'进行渲染。
• 'repeat-x'，仅水平平铺。
• 'repeat-y'，仅垂直平铺。
• 'no-repeat'，不平铺。

案例

图片缩小，并作为纹理显示。我们直接把<img>元素作为纹理图案是无法控制其尺寸的，我们可以将<img>元素绘制在大小可控的Canvas元素上，然后把这个Canvas元素作为图案进行平铺即可。代码参见：

<canvas id="canvas" width="250" height="167"></canvas>

// 先绘制图片
var img = new Image();
img.onload = function () {
    // 我们创建一个Canvas元素
    var canvasCreated = document.createElement('canvas');
    canvasCreated.width = 50;
    canvasCreated.height = 34;
    canvasCreated.getContext('2d').drawImage(this, 0, 0, 50, 34);
    // 页面上需要呈现最终纹理的Canvas上下文
    var context = canvas.getContext('2d');
    // 创建纹理并填充，顺便测试null是否渲染为'repeat'
    var pattern = context.createPattern(canvasCreated, null);
    context.fillStyle = pattern;
    context.fillRect(0, 0, 250, 167);
};
img.src = './1.jpg';

实时效果如下：

其他

规范文档

相关资源

暂无

兼容性

IE9+支持，全兼容。

最近更新：by zhangxinxu 2019-10-18 01:44:04