Gambar untuk digunakan:
Contoh
Mengulang gambar secara horisontal dan vertikal:
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(); Cobalah sendiri " Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung metode ini.
| metode | |||||
|---|---|---|---|---|---|
| createPattern() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definisi dan Penggunaan
The createPattern() metode mengulangi elemen tertentu dalam arah tertentu.
Elemen dapat menjadi gambar, video, atau lain <canvas> elemen.
elemen diulang bisa digunakan untuk menggambar / mengisi persegi panjang, lingkaran, garis dll
| sintaks JavaScript: | context . createPattern( image ,"repeat|repeat-x|repeat-y|no-repeat") ; |
|---|
Nilai parameter
| Parameter | Deskripsi | Mainkan |
|---|---|---|
| image | Menentukan gambar, kanvas, atau elemen video dari pola untuk menggunakan | |
| ulangi | Default. pola berulang secara horisontal dan vertikal | Mainkan " |
| ulangi-x | Pola mengulangi hanya secara horizontal | Mainkan " |
| repeat-y | Pola mengulangi hanya secara vertikal | Mainkan " |
| no-repeat | Pola ini akan ditampilkan hanya sekali (no repeat) | Mainkan " |
<Canvas Object