HTML canvas translate() Metode

❮ HTML-doekverwysing

Voorbeeld

Teken 'n reghoek in posisie (10,10), stel nuwe (0,0) posisie op (70,70). Teken weer dieselfde reghoek (let op dat die reghoek nou in posisie (80,80) begin:

Jou blaaier ondersteun nie die HTML5-skerm nie.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillRect(10, 10, 100, 50);
ctx.translate(70, 70);
ctx.fillRect(10, 10, 100, 50);

Blaaierondersteuning

Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die metode ten volle ondersteun.

Method
translate() Yes 9.0 Yes Yes Yes

Definisie en gebruik

Die translate() metode herkaart die (0,0) posisie op die doek.

Let wel: Wanneer jy 'n metode soos fillRect() na translate() aanroep, word die waarde by die x- en y-koördinaatwaardes gevoeg.

Illustrasie van die translate() metode

JavaScript-sintaksis: konteks .translate( x,y );

Parameterwaardes

Let wel: Jy kan een of albei parameters spesifiseer.

Parameter Description Play it
x The value to add to horizontal (x) coordinates
y The value to add to vertical (y) coordinates

❮ HTML-doekverwysing