HTML canvas translate() Yöntem

❮ HTML Kanvas Referansı

Örnek

(10,10) konumunda bir dikdörtgen çizin, yeni (0,0) konumunu (70,70) olarak ayarlayın. Aynı dikdörtgeni tekrar çizin (dikdörtgenin şimdi (80,80) konumunda başladığına dikkat edin):

TarayıcınızHTML5tuval etiketini desteklemiyor.

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);

Tarayıcı Desteği

Tablodaki sayılar, yöntemi tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

Method
translate() Yes 9.0 Yes Yes Yes

Tanım ve Kullanım

translate() yöntemi, tuval üzerindeki (0,0) konumunu yeniden eşler.

Not: translate()'den sonra fillRect() gibi bir yöntemi çağırdığınızda, değer x ve y koordinat değerlerine eklenir.

translate() yönteminin resmi

JavaScript sözdizimi: bağlam .translate( x,y );

Parametre Değerleri

Not: Bir veya her iki parametreyi de belirtebilirsiniz.

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

❮ HTML Kanvas Referansı