Canvas transform() metod
Definition och användning
Varje objekt på canvas har en current transformation matrix.
transform() Metoden ersätter den aktuella transformationsmatrisen. Den använder följande matris för att manipulera den aktuella transformationsmatrisen:
a c e b d f 0 0 1
Det innebär att transform() låter dig skalera, rotera, flytta och luta den aktuella miljön.
Kommentar:Denna transformation påverkar bara ritningen efter att transform() metoden har anropats.
Kommentar:transform() metoden beter sig relativt till rotate()ochscale()ochtranslate() eller andra transformationer genom att använda transform(). Till exempel: om du redan har satt ritningen till två gånger så kommer transform() metoden att förstora ritningen två gånger, och din ritning kommer slutligen att vara fyra gånger större.
Tips:Se till setTransform() Metod, den agerar inte i förhållande till andra transformationer.
Exempel
Rita en rektangel; lägg till en ny transformationsmatris genom att använda transform() och rita rektangeln igen; lägg till en ny transformationsmatris och rita rektangeln igen.Observera att varje gång du anropar transform() byggs det på den tidigare transformationsmatrisen:
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 |
Kommentar:Internet Explorer 8 och tidigare versioner stöder inte <canvas>-elementet.
