HTML canvas transform() Metodu
Tanım ve Kullanım
Her çizim nesnesi, mevcut değiştirme matrisine sahiptir.
transform() Yöntem, mevcut değiştirme matrisini değiştirir. Mevcut değiştirme matrisini şu şekilde işler:
a c e b d f 0 0 1
Diyelim ki, transform() yöntemi, mevcut ortamı ölçeklendirmek, döndürmek, hareket ettirmek ve yatay eğimlendirmek için izin verir.
Açıklama:Bu değiştirme, sadece transform() yöntemi çağrıldıktan sonra çizime etki eder.
Açıklama:transform() yönteminin davranışı, rotate()vescale()vetranslate() veya transform() ile yapılan diğer değiştirmeler. Örneğin: Eğer çizimi iki kat büyütmüşseniz, transform() yöntemi çizimi iki kat büyütecek, sonunda çiziminiz dört kat büyüyecektir.
İpucu:Bakınız setTransform() Yöntem, diğer değiştirmelere göre davranış göstermez.
Örnek
Bir dikdörtgen çizmek için; transform() ile yeni bir değiştirme matrisi ekleyerek tekrar çizmek; yeni bir değiştirme matrisi ekleyerek tekrar çizmek. lütfen dikkat edin, her zaman transform() çağrıldığında, bu, bir önceki değiştirme matrisi üzerinde inşa eder:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);
Sözdizimi
context.transform(a,b,c,d,e,f);
Parametre Değeri
| Parametre | Açıklama |
|---|---|
| a | Dikdörtgen ölçeklendirme绘图。 |
| b | Dikdörtgen eğimlendirme绘图。 |
| c | Dikdörtgen eğimlendirme绘图。 |
| d | Dikdörtgen ölçeklendirme绘图。 |
| e | Dikdörtgen移动绘图。 |
| f | Dikdörtgen移动绘图。 |
Tarayıcı Desteği
Tablodaki rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Açıklama:Internet Explorer 8 ve daha eski sürümler <canvas> elementini desteklememektedir.
