Canvas setTransform() metoden

Canvas referencemanual

DefinITION OG BRUG

hver objekt på canvas har en aktuelt transformationsmatrix.

setTransform() metoden genindstiller den aktuelle transformationsmatrix til enhedsmatrixen og kører transform().

Med andre ord tillader setTransform() dig at skalere, rotere, flytte og skæve den aktuelle miljø.

Bemærk:Denne transformation påvirker kun tegning efter kald af setTransform().

Eksempel

Tegn et rektangel, genindstil og opret en ny transformationsmatrix med setTransform(), tegn rektangelet igen, genindstil og opret en ny transformationsmatrix, og tegn rektangelet igen. Bemærk, at røde rektangel ikke vil blive vist nedenfor, fordi det ligger under det blå rektangel:

Din browser understøtter ikke HTML5 canvas tagget.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);

亲自试一试

语法

context.setTransform(a,b,c,d,e,f);

参数值

参数 描述
a 水平旋转绘图。
b 水平倾斜绘图。
c 垂直倾斜绘图。
d 垂直缩放绘图。
e Horisontal bevægelses tegning.
f Vertikal bevægelses tegning.

Browserunderstøttelse

Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter egenskaben.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Bemærk:Internet Explorer 8 og tidligere versioner understøtter ikke <canvas>-elementet.

Canvas referencemanual