了解CanvasRenderingContext2D.createPattern()

简介

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

语法

context.createPattern(image, repetition);

返回值是CanvasPattern对象。

参数

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

image
Object
用来平铺的CanvasImageSource图像。可以是下面的类型:
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';

实时效果如下:

其他

规范文档

规范地址 规范状态 备注
HTML现行标准
这个规范中定义了'CanvasRenderingContext2D.createPattern'
现行标准 -

相关资源

暂无

兼容性

IE9+支持,全兼容。


by zhangxinxu 2019-10-18 01:44:04