Canvas createPattern() 方法

定义和用法

createPattern() 方法在指定的方向内重复指定的元素。

元素可以是图片、视频或其他<canvas>元素。

被重复的元素可用于绘制/填充矩形、圆形或线条等。

实例

使用的图像:

lampe

在水平和垂直方向上重复图像:

您的浏览器不支持HTML5 canvas标签。

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();

亲自试一试

语法

context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");

参数值

参数 描述
image 指定要使用的图片、画布或视频元素。
repeat 默认。此模式在水平和垂直方向上重复。
repeat-x 此模式仅在水平方向上重复。
repeat-y Dieser Modus wird nur in der vertikalen Richtung wiederholt.
no-repeat Dieser Modus wird nur einmal angezeigt (wird nicht wiederholt).

Browserunterstützung

Die in der Tabelle angegebenen Zahlen geben die erste Browserversion an, die diese Eigenschaft vollständig unterstützt.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Anmerkung:Internet Explorer 8 und frühere Versionen unterstützen das <canvas>-Element nicht.