Canvas transform() metode
Definition og brug
Hver objekt på canvas har en current transformation matrix.
transform() Metode erstatter den aktuelle transformationstabel. Den opererer med den aktuelle transformationstabel med nedenstående matrix:
a c e b d f 0 0 1
Med andre ord, transform() giver dig mulighed for at skalere, rotere, flytte og hæve det aktuelle miljø.
Bemærkning:Denne transformation påvirker kun tegningen efter transform() metoden kaldes.
Bemærkning:transform() metodes opførsel relateret til rotate(),scale(),translate() eller andre transformationer udførte ved transform(). For eksempel: Hvis du allerede har sat tegningen til at være to gange større, vil transform() metoden gøre tegningen to gange større, og din tegning vil til sidst blive fire gange større.
Tip:Se også setTransform() Metode, der ikke opfører sig relativt til andre transformationer.
Eksempel
Tegn en rektangel; tilføj en ny transformation til en ny transformationstabel, tegn rektanglen igen; tilføj en ny transformation til en ny transformationstabel, og tegn rektanglen igen. Bemærk, at hvert gang du kalder transform(), opbygger den en ny transformationstabel på toppen af den tidligere:
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 |
Bemærkning:Internet Explorer 8 og ældre versioner understøtter ikke <canvas>-elementet.
