HTML canvas createPattern() 方法

定义和用法

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

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

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

实例

用到的图像:

lamp

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

Your browser does not support the HTML5 canvas tag.

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 ਇਹ ਮੋਡ ਕੇਵਲ ਵਾਸਤਵਿਕ ਦਿਸ਼ਾ ਵਿੱਚ ਦੋਹਰਾਏ ਜਾਵੇਗਾ。
no-repeat ਇਹ ਮੋਡ ਕੇਵਲ ਇੱਕ ਵਾਰ ਦਿਖਾਈ ਦੇਵੇਗਾ (ਨਾ ਮੁੜ ਦਿਖਾਈ ਦੇਵੇਗਾ)。

ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ

ਸਾਰੇ ਨੰਬਰਾਂ ਵਿੱਚ ਪਹਿਲੀ ਵਾਰ ਇਸ ਗੁਣ ਨੂੰ ਸਮਰਥਨ ਕਰਨ ਵਾਲੇ ਬਰਾਉਜ਼ਰ ਦੀ ਸੰਸਕਰਣ ਦਿਸਾਈ ਗਈ ਹੈ。

ਚਰਮੋਨੀ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪਰਾ
ਚਰਮੋਨੀ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪਰਾ
4.0 9.0 3.6 4.0 10.1

ਟਿੱਪਣੀ:Internet Explorer 8 ਅਤੇ ਪਹਿਲੇ ਦੀਆਂ ਸੰਸਕਰਣਾਂ <canvas> ਐਲੀਮੈਂਟ ਨੂੰ ਸਮਰਥਨ ਨਹੀਂ ਦਿੰਦੇ ਹਨ。