Canvas createPattern() ਮੈਥਡ

ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ

createPattern() ਵਿਸ਼ੇਸ਼ ਦਿਸ਼ਾ ਵਿੱਚ ਵਿਸ਼ੇਸ਼ ਐਲੀਮੈਂਟ ਨੂੰ ਦੁਹਰਾਉਂਦਾ ਹੈ。

ਐਲੀਮੈਂਟ ਚਿੱਤਰ, ਵੀਡੀਓ ਜਾਂ ਹੋਰ <canvas> ਐਲੀਮੈਂਟ ਹੋ ਸਕਦਾ ਹੈ。

ਦੁਹਰਾਈ ਗਈ ਐਲੀਮੈਂਟ ਰੈਕਟੈਂਜ, ਸਮਕੇਂਦਰ ਜਾਂ ਲਾਈਨ ਆਦਿ ਦੇ ਰਚਨ/ਭਰਨ ਲਈ ਵਰਤੀਆਂ ਜਾ ਸਕਦੀਆਂ ਹਨ。

ਇਨਸਟੈਂਸ

ਵਰਤੇ ਗਏ ਚਿੱਤਰ:

lamp

ਹੰਗਮਾਨ ਅਤੇ ਖੰਡ ਦਿਸ਼ਾ ਵਿੱਚ ਚਿੱਤਰ ਦੁਹਰਾਓ:

ਤੁਹਾਡਾ ਬਰਾਉਜ਼ਰ HTML5 ਕੈਂਵਾਸ ਟੈਗ ਨੂੰ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦਾ ਹੈ。

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 该模式只显示一次(不重复)。

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

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

تعلیمات:Internet Explorer 8 اور اس سے پہلے کی نسلیں <canvas> علامت کو نہیں دعو کرسکتی ہیں。