HTML5 Canvas mengimplementasikan terjemahan/penskalaan/rotating deom contoh (dengan tangkapan layar)

Komentar: HTML5 Canvas menyediakan API grafis yang dapat diimplementasikan, yang melaluinya Anda dapat dengan mudah mewujudkan terjemahan, rotasi, penskalaan, dll. Izinkan saya berbagi dengan Anda implementasi spesifik dari terjemahan, rotasi, penskalaan, dan gambar referensi. Teman yang tertarik dapat merujuknya. Saya harap ini akan membantu Anda.

Menerjemahkan

Terjemahan koordinat menerjemahkan (x, y) berarti menerjemahkan koordinat (0,0) ke (x, y), dan koordinat asli (0,0) menjadi (-x, -y)

Ilustrasinya adalah sebagai berikut:

Titik koordinat dari setiap titik koordinat asli p (sapi, oy) setelah terjemahan adalah p (ox-x, oy-y), di mana titik (x, y) adalah terjemahan

Titik koordinat terjemahan (x, y).

Demo Kode:

// Translate memindahkan titik start ke centera dan kembali ke sudut kiri atas

fungsi renderText (lebar, tinggi, konteks) {

Context.translate (lebar / 2, tinggi / 2); // Koordinat titik tengah adalah (0, 0)

context.font = "18px Arial";

context.fillstyle = "biru";

Context.FillText ("Harap tekan <SCS> ke Game Keluar", 5,50);

context.translate (-width/2, -height/2); // Pemulihan Terjemahan (0,0) Koordinat adalah sudut kiri atas

context.filltext ("I'm Back to Top", 5,50);

}

Skala

Skala (A, B) berarti skala objek di sepanjang sumbu XY ke ukuran A*X, B*Y masing -masing. Efeknya ditunjukkan pada gambar:

// Terjemahkan persegi panjang.

fungsi drawpath (konteks) {

Context.translate (200.200);

Context.Scale (2,2); // Skala Ukuran Dua kali dari bentuk asli

Context.strokestyle = "Green";

context.beginpath ();

Context.moveto (0,40);

Context.lineto (80,40);

Context.lineto (40,80);

context.closepath ();

Context.stroke ();

}

Memutar

Rotate Angle Rotate (Math.pi/8)

Koordinat p (x, y) sebelum rotasi adalah p (rx, ry) setelah rotasi yang sesuai

Rx = x * cos (-angle)-y * sin (-angle);

Ry = y * cos (-angle) + x * sin (-angel);

Rotasi 90 derajat dapat disederhanakan untuk:

Rx = y;

Ry = -x;

Arah rotasi default di kanvas searah jarum jam. Kode demo adalah sebagai berikut:

// point.x baru = x * cos (-angle) -y * sin (-angle),

// titik baru.

function renderotateText (konteks) {

Context.font = "24px Arial";

context.fillstyle = "merah";

context.filltext ("Aku di sini !!!", 5,50);

// putar -90 derajat

// context.rotate (-math.pi/2);

// context.fillstyle = "blue";

// context.filltext ("Aku di sini !!!", -400,30);

// putar 90 derajat

Context.Rotate (Math.pi/2);

context.fillstyle = "biru";

Context.FillText ("Aku di sini !!!", 350, -420);

Console.log (Math.sin (Math.pi/2));

// rotae 90 derajat dan gambar 10 baris

context.fillstyle = "hijau";

untuk (var i = 0; i <4; i ++) {

var x = (i+1)*20;

var y = (i+1)*60;

var newx = y;

var newy = -x;

Context.Fillrect (Newx, Newy, 200, 6);

}

}

Praktik yang biasa adalah menggunakan rotasi dan terjemahan, pertama -tama menerjemahkan koordinat (0,0) ke posisi tengah.

Terjemahkan (Lebar/2, Tinggi/2) dan kemudian putar (Math.pi/2) untuk menyelesaikan rotasi

Contoh kode adalah sebagai berikut:

fungsi saveandrestoreContext (konteks) {

Context.Save ();

Context.translate (200.200);

Context.Rotate (Math.pi/2);

context.fillstyle = "hitam";

Context.FillText ("Konteks 2D berputar dan terjemahan", 10, 10);

Context.Restore ();

Context.FillText ("Konteks 2D berputar dan terjemahan", 10, 10);

}

Semua kode JavaScript:

var tempcontext = null; // Konteks 2D Variabel Global

window.onload = function () {

var canvas = document.geteLementById ("target");

Canvas.width = 450;

Canvas.Height = 450;

if (! canvas.getContext) {

Console.log ("Canvas tidak didukung. Harap instal browser yang kompatibel HTML5.");

kembali;

}

// Dapatkan konteks 2D kanvas dan gambar gambar

tempcontext = canvas.getContext ("2d");

// renderText (canvas.width, canvas.height, tempcontext);

SaveAndresToRecontext (TempContext);

// drawpath (tempcontext);

}

// Translate adalah memindahkan titik awal ke centera dan kembali ke sudut kiri atas

fungsi renderText (lebar, tinggi, konteks) {

Context.translate (lebar / 2, tinggi / 2);

context.font = "18px Arial";

context.fillstyle = "biru";

Context.FillText ("Harap tekan <SCS> ke Game Keluar", 5,50);

context.translate (-width/2, -height/2);

context.filltext ("I'm Back to Top", 5,50);

}

// Terjemahkan persegi panjang.

fungsi drawpath (konteks) {

Context.translate (200, 200);

Context.Scale (2,2); // skala ukuran dua kali dari bentuk asli

Context.strokestyle = "Green";

context.beginpath ();

Context.moveto (0, 40);

Context.lineto (80, 40);

Context.lineto (40, 80);

context.closepath ();

Context.stroke ();

}

// point.x baru = x * cos (-angle)-y * sin (-angle),

// titik baru.

function renderotateText (konteks) {

Context.font = "24px Arial";

context.fillstyle = "merah";

context.filltext ("Aku di sini !!!", 5,50);

// putar -90 derajat

// context.rotate (-math.pi/2);

// context.fillstyle = "blue";

// context.filltext ("Aku di sini !!!", -400,30);

// putar 90 derajat

Context.Rotate (Math.pi/2);

context.fillstyle = "biru";

Context.FillText ("Aku di sini !!!", 350, -420);

Console.log (Math.sin (Math.pi/2));

// rotae 90 derajat dan gambar 10 baris

context.fillstyle = "hijau";

untuk (var i = 0; i <4; i ++) {

var x = (i+1)*20;

var y = (i+1)*60;

var newx = y;

var newy = -x;

Context.Fillrect (Newx, Newy, 200, 6);

}

}

fungsi saveandrestoreContext (konteks) {

Context.Save ();

Context.translate (200.200);

Context.Rotate (Math.pi/2);

context.fillstyle = "hitam";

Context.FillText ("Konteks 2D berputar dan terjemahan", 10, 10);

Context.Restore ();

Context.FillText ("Konteks 2D berputar dan terjemahan", 10, 10);

}