了解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';
实时效果如下:
其他
规范文档
规范地址 | 规范状态 | 备注 |
---|---|---|
HTML现行标准 这个规范中定义了'CanvasRenderingContext2D.createPattern' |
现行标准 | - |
相关资源
暂无
兼容性
IE9+支持,全兼容。
by zhangxinxu 2019-10-18 01:44:04