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