Canvas transform() Metodu
Tanım ve Kullanım
Canvas üzerindeki her nesne, bir mevcut dönüş matrisine sahiptir.
transform() Metodu, mevcut dönüş matrisini değiştirmek için kullanır. Aşağıda tanımlanan matrisle mevcut dönüş matrisini işlemek için aşağıdaki gibi kullanır:
a c e b d f 0 0 1
Diğer bir deyişle, transform() metodu, mevcut ortamı ölçeklendirmek, döndürmek, hareket ettirmek ve eğimlendirmenize olanak tanır.
Açıklama:Bu dönüş, sadece transform() metodu çağrıldıktan sonraki çizimleri etkiler.
Açıklama:transform() metodu的行为相对于 rotate(),scale(),translate() veya transform() ile yapılan diğer dönüşler. Örneğin: Eğer çizimi iki kat büyütme ayarladıysanız, transform() metodu çizimi iki kat büyütecek, çiziminiz sonunda dört kat büyüyecektir.
İpucu:Bakınız setTransform() Metod, diğer dönüşlere göre davranış göstermez.
Örnek
Bir düörtgen çiz; transform() ile yeni bir dönüş matrisi ekleyerek düörtgeni tekrar çiz; yeni bir dönüş matrisi ekleyerek tekrar çiz. Dikkat edin, her zaman transform() çağrıldığında, bu, bir önceki dönüş matrisi üzerine inşa edilir:
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);
语法
context.transform(a,b,c,d,e,f);
参数值
| 参数 | 描述 |
|---|---|
| a | 水平缩放绘图。 |
| b | 水平倾斜绘图。 |
| c | 垂直倾斜绘图。 |
| d | 垂直缩放绘图。 |
| e | 水平移动绘图。 |
| f | 垂直移动绘图。 |
浏览器支持
表中的数字注明了首个完全支持该属性的浏览器版本。
| 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.
