Μάθημα 6 Μετασχηματισμοί στο αντικείμενο Canvas

Μετασχηματισμοί / transforms Method Περιγραφή scale()Κλιμάκωση. Το τρέχον σχέδιο γίνεται μεγαλύτερο ή μικρότερο rotate()Περιστρέφει το τρέχον σχέδιο translate()Επαναθέτει το (0,0) σε μια θέση στον καμβά transform()Αντικαθιστά την τρέχουσα μήτρα μετασχηματισμού για το σχέδιο setTransform()Θέτει μήτρα μετασχηματισμού. See wiki:

Μετακίνηση / Translation translate(dx,dy)Επαναθέτει το (0,0) σε μια θέση στον καμβά μετακινούμενο κατά dx, dy Απλή μετακίνηση

Παράδειγμα Your browser is not HTML5 compatible. var c = document.getElementById("myCanvas"); var contx = c.getContext("2d"); contx.fillRect(10, 10, 100, 50); contx.translate(70, 70); contx.translate(10, 10); contx.fillRect(10, 10, 100, 50);

Περιστροφή / Rotation Theta: γωνία σε rad. Για τη μετατροπή των μοιρών (degrees) σε rad theta=μοίρες*Math.PI/180 Method Περιγραφή context.rotate(theta); Περιστροφή του context ως προς το κέντρο.

Παράδειγμα Your browser is not HTML5 compatible. var c = document.getElementById("myCanvas"); var contx = c.getContext("2d"); contx.rotate(90 * Math.PI / 180); contx.fillRect(30, 10, 60, 70);

Scale method Your browser is not HTML5 compatible. var c = document.getElementById("myCanvas"); var contx = c.getContext("2d"); contx.strokeRect(1, 1, 10, 10); contx.scale(6, 5); contx.strokeRect(1, 1, 10, 10);

Transform method a Κλιμάκωση του σχεδίου οριζοντίως (scale horizontal) b Στρέβλωση του σχεδίου οριζόντια (skew horizontal) c Στρέβλωση του σχεδίου κάθετα (skew vertical) d Κλιμάκωση του σχεδίου κάθετα (scale vertical) dx Μετακίνηση του σχεδίου οριζοντίως (translate horizontal) dy Μετακίνηση του σχεδίου κάθετα (translate vertical) Method Περιγραφή context.transform(a,b,c,d,dx,dy) Μετακίνηση, κλιμάκωση και στρέβλωση του context του canvas. Γενική μορφή μετασχηματισμού

Γνώση υπόβαθρου για το animation Προκειμένου να συνεχίσετε την ανάγνωση που αφορά το animation θα πρέπει πρώτα να μελετήσετε τα θέματα που αφορούν την δημιουργία κλάσεων και αντικειμένων στο javascript Σας συνιστώ να ξεκινήσετε από Ιδιαίτερα να μελετήσετε την έννοια του constρuctor και του τρόπου υλοποίησης.

Ο κύκλος του Animation 1. Εκκίνηση2. Ενημέρωση του καμβά 3. Καθαρισμός του καμβά 4. Σχεδιασμός του καμβά Ο κύκλος του animation

Animation class var Animation = function(canvasId){ this.canvas = document.getElementById(canvasId); this.context = this.canvas.getContext("2d"); this.t = 0; this.timeInterval = 0; this.startTime = 0; this.lastTime = 0; this.frame = 0; this.animating = false; // provided by Paul Irish window.requestAnimFrame = (function(callback){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback){ window.setTimeout(callback, 1000 / 60); }; })(); };

Animation.prototype.getContext = function(){ return this.context; }; Animation.prototype.getCanvas = function(){ return this.canvas;}; Animation.prototype.clear = function(){ this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);}; Animation.prototype.setStage = function(func){ this.stage = func;}; Animation.prototype.isAnimating = function(){ return this.animating;}; Animation.prototype.getFrame = function(){ return this.frame;}; Animation.prototype.start = function(){ this.animating = true; var date = new Date(); this.startTime = date.getTime(); this.lastTime = this.startTime; if (this.stage !== undefined) { this.stage(); } this.animationLoop(); };

Animation.prototype.stop = function(){ this.animating = false; }; Animation.prototype.getTimeInterval = function(){ return this.timeInterval; }; Animation.prototype.getTime = function(){ return this.t; }; Animation.prototype.getFps = function(){ return this.timeInterval > 0 ? 1000 / this.timeInterval : 0; }; Animation.prototype.animationLoop = function(){ var that = this; this.frame++; var date = new Date(); var thisTime = date.getTime(); this.timeInterval = thisTime - this.lastTime; this.t += this.timeInterval; this.lastTime = thisTime; if (this.stage !== undefined) { this.stage(); } if (this.animating) { requestAnimFrame(function(){ that.animationLoop(); }); }};

Ένα παράδειγμα window.onload = function(){ var anim = new Animation("myCanvas"); var canvas = anim.getCanvas(); var context = anim.getContext(); var linearSpeed = 100; // pixels / second var box = { x: 0, y: canvas.height / , width: 100, height: 50 };

anim.setStage(function(){ // update var linearDistEachFrame = linearSpeed * this.getTimeInterval() / 1000; if (box.x < canvas.width - box.width) { box.x += linearDistEachFrame; } else { this.stop(); } // clear this.clear(); // draw context.beginPath(); context.fillStyle = "blue"; context.fillRect(box.x, box.y, box.width, box.height); }); anim.start(); };

Δεύτερο παράδειγμα window.onload = function(){ var anim = new Animation("myCanvas"); var canvas = anim.getCanvas(); var context = anim.getContext(); var gravity = 2; // pixels / second^2 var box = { x: canvas.width / , y: 0, vx: 0, vy: 0, width: 100, height: 50 };

anim.setStage(function(){ // update if (this.getTime() > 1000) { var speedIncrementEachFrame = gravity * anim.getTimeInterval() / 1000; // pixels / second box.vy += speedIncrementEachFrame; box.y += box.vy * this.getTimeInterval(); if (box.y > canvas.height - box.height) { box.y = canvas.height - box.height; this.stop(); } // clear this.clear(); // draw context.beginPath(); context.fillStyle = "blue"; context.fillRect(box.x, box.y, box.width, box.height); }); anim.start(); };